vue-cli入门(二)——sass的运用

承接上文,在创建好的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">

到这里基本上就大功告成了。

你可能感兴趣的:(vue)