vue-cli创建vue2.0项目,安装sass步骤
创建vue2.0项目:
vue init webpack 项目名
安装sass步骤:
npm install node-sass@4.14.1
npm install sass-loader@7.3.1 --save-dev
不要使用一条命令npm i --save-dev node-sass sass-loader
因为最新安装的sass-loader是8.0,会报错!
就这两个步骤,即可在项目里使用sass(scss)!
不需要在build文件夹下的webpack.base.conf.js的rules里面添加配置!
{
test: /.scss$/,
loaders: [‘style’, ‘css’, ‘sass’]
}
上面那条配置可以省略，因为最新的vue-cli已经是默认配置好sass的（在build/util.js里），所以如果再在webpack里配置会重复，因此在main.js引入scss文件时会报错，也就是所只要安装了sass就行，什么都不用配置了!
成功后测试一下
<style lang="scss">
//$back:red;
#app {
//background:$back;
width: 100%;
height: 100%;
}
新建sass文件，并定义变量
$my-font-color:#5794FF;
$my-line-color: #e8e8e8;
，之后导入文件到App.vue中
<style lang="scss">
@import "@/assets/styles/vars.scss";
</style>
之后就可以在所有页面正常使用啦
