vue中使用sass

1、安装
npm install node-sass --save-dev
npm install sass-loader@^7.3.1 --save-dev  (尽量不要安装大于8版本会报错）
npm install style-loader --save-dev

如果node-sass安装不上：
npm install --save node-sass --registry=registry.npm.taobao.org --disturl=npm.taobao.org/dist --sass-binary-site=npm.taobao.org/mirrors/nod…

2、使用
vue-cli2：  webpack.base.config.js中

{     test: '\.scss$\,     loaders: ['style', 'css', 'sass']}

3、全局引用公共common.scss
方法一： 直接在main.js中引入

import '@/styles/common.scss'

此方法当common.scss中使用变量($theme-color ）混合器( @mixin)时会报错，解决方法使用方法二

方法二：
vue.config.js中

css: {        loaderOptions: {            sass: {                data: `@import "~@/styles/posCommon.scss";`            }        }    },

不需要在main.js中引入，也不需要每个页面引入

4、scss 与 sass区别
scss是sass的一个升级版本,完全兼容sass之前的功能,又有了些新增能力
不同： |
a: 扩展名不同；
b: 书写方式不同， sass没有{}类似于ruby， scss与css一样

sass语法.my-element  color= !primary-color  width= 100%  overflow= hidden

.my-element{
  color: red;
  width: 100%
}