承接上文,在创建好的vue项目目录中打开命令行(如果没有创建项目移步vue-cli入门(一)——搭建环境),执行命令:
npm install node-sass --save-dev
npm install sass-loader --save-dev
注: 如果node-sass安装失败(emmmmm一般来说都是安装不成功的),可以试着使用cnpm来安装:
cnpm install node-sass --save-dev
至于怎么安装配置cnpm的问题这里就不写了,网上一大把。
安装成功之后呢找到项目中build文件夹下的webpack.base.config.js文件,用编辑器打开它。找到rules在里面加上配置:
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
},
最后!!!在你的组件XXx.vue中修改style属性:
<style lang="scss">
到这里基本上就大功告成了。