vue中使用sass

1.npm安装

npm install sass-loader --save-dev
npm install node-sass --save-dev
//--save写入到package.json里面 -dev指只安装在开发阶段

简化写法

npm i sass-loader -D

npm i node-sass -D

合并 npm i sass-loader node-sass -D

2.在build文件夹下的webpack.base.conf.js的rules里面添加配置

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

3.使用

<style lang="scss">

sass和scss的区别

sass一种缩进语法，以换行和缩进制定代码标准。 scss是 CSS 的扩展，语法完全兼容 CSS3，并且继承了 sass的强大功能。 也就是说CSS转换成scss只需要修改后缀名为.scss即可。

注意现在使用vue2.0后不再需要再webpack.base.conf.js的rules里面添加配置

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