Sass Language
Sass is a powerful css extension language (css itself is not a language). It allows you to use some features of variables, nested rules, mixins, imports, etc. CSS has no features but development languages (such as Java, C#, Ruby, etc.), and is fully compatible with CSS syntax. Sass helps keep large stylesheets structured well.
There are two syntaxes for Sass.
A type of CSS is an extended version of CSS3 syntax. That is to say, all style sheets that conform to CSS3 syntax are also SCSS files with the same syntax meaning. The SCSS style sheet files must end with the .scss extension. In vue we can use<style lang="scss"></style>The contents in the sign are written in SCSS syntax.
A kind of syntax called SASS is the previous syntax. Like python, it does not have {} braces to mark program blocks, but marks nesting levels with indentation; and it does not use semicolons, but uses line breaks to separate attributes. The SASS stylesheet file should end with the .sass extension. In vue we can use<style lang="sass"></style>The contents in the sign are written in SASS grammar.
Use style file sass in vue. If each .vue file introduces this style, after building the file, it will inevitably cause duplication and redundancy of the style. If a scss file is introduced globally, and the definition variable is referenced in other components or pages to report undefined errors, other styles can be displayed normally, which is obviously a compilation problem. Then, it is necessary to set and load the style globally!
First, install npm
"sass-loader": "^6.0.7", "sass-resources-loader": "^1.3.3",
In build/, add in module rules
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
Then add the following code to the build/ file:
It should be noted that my global style is placed insrc/common/sass/In-house
function resolveResouce(name) {
return (__dirname, '../src/common/sass/' + name);
}
function generateSassResourceLoader() {
var loaders = [
cssLoader,
'postcss-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
//This is the sass file used. Multiple files are passed in the form of an array. This is a scss file with variables and mixin resources: [resolveResouce(''), resolveResouce('')] Note that this is where my global style is，Different individually，Need to make adjustments
}
}
];
if () {
return ({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
Finally, change the return part at the bottom of the page to the following
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
//sass: generateLoaders('sass', { indentedSyntax: true }),
//scss: generateLoaders('sass'),
sass: generateSassResourceLoader(),
scss: generateLoaders('sass')
.concat(
{
loader: 'sass-resources-loader',
options: {
resources: (__dirname, '../src/common/sass/') //Note that this is my global style position. I have different personalities and need to make adjustments. }
}
),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
Summarize
The above is the editor introducing to you the use of sass and configure global sass style variables in vue2. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!