vue2.0 Install sass (SCSS) above version

First, explain the difference between sass and SCSS.

1, similarities and differences: 1) In short, you can understand that SCSS is an upgraded version of Sass, fully compatible with the functions of sass, and some new capabilities. Grammatical forms are slightly different, the main thing is that sass is indented to represent nested relationships, scss is curly braces

2) Unlike the file name extension, Sass is an extension with a ". Sass" suffix, and SCSS is an extension with a ". SCSS" suffix

3) The grammar is written in different ways, Sass is written in strict indentation grammar rules, without curly braces ({}) and semicolons (;), and SCSS's syntax is very similar to the way we write CSS syntax.

  . Father    width:100px;    . Son        width:50px; //  . father{    width:100px;    . son{        width:50px;    }}       

2, Scss function is very powerful appearance, can do arithmetic, write function what, but I just as grammar sugar use only, see some basic function
Some of the features I use personally are:

• Nesting
• Variable $color: #111111;
• Mixed @mixin
• Inherit @extend

3. A summary of applicable scenarios for @mixin, @extend and%placeholder

• Mixin can pass variables
• Extend can not pass variables, the same style directly inherit, will not cause code redundancy, the base class is not inherited, will also be compiled into CSS code
• Placeholder is not compiled into CSS code when the base class is not inherited

Two

1. start using SASS in the Vue project, enter commands at the command line to install (use git command line to paste with Shift+insert or not paste)

//
//
// Install Style-loader Some people install the Vue-style-loader is actually the same! 

2. This time you open the Webpack.base.config.js under the Build folder
Change the module into this.

Module: {
Rules: [
{
Test:/\.vue$/,
Loader'Vue-loader',
Options:vueloaderconfig
},
{
Test:/\.js$/,
Loader'Babel-loader',
Include: [Resolve ('src'),
Resolve'Test')]
},
{
Test:/\. (png|jpe?g|gif|svg) (\?. *)?$/,
Loader'Url-loader',
Options: {
Limit10000,
Name:utils.assetsPath ('Img/[name]. [Hash:7]. [Ext]')
}
},
{
Test:/\. (woff2?| EOT|TTF|OTF) (\?. *)?$/,
Loader'Url-loader',
Options: {
Limit10000,
Name:utils.assetsPath ('Fonts/[name]. [Hash:7]. [Ext]')
}
},
{//from this section above is the default! Don't change it! Below is no need for you to manually add, equivalent to compiling the recognition sass!
Test:/\.scss$/,
Loaders: ["Style", "CSS", "sass"]
}
]
}

3. Add lang=scss where sass is needed

<style lang="scss" scoped= "" type="text/css "
//
   Body {
        //
       
</style>

Some other uses of sass can be viewed on the official website!

vue2.0 Install sass (SCSS) above version