Vue中配置Sass

NPM中SASS的详细指南

1.创建自己的Vue项目

npm install --global vue-cli

npm install -g webpack

vue init webpack myVue

2.按照Sass依赖包

npm install sass-loader node-sass --save-dev

因为sass-loader需要node-sass和webpack 作为peerDependency。

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

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

4.在需要用到scss的XXX.vue文件的style标签是写入：lang="scss"

<style lang="scss">

随便写一下如下:

<template>
  <div id="app">
    <div class="container">
      <p>sass引入成功</p>
    </div>
  </div>
</template>
<style lang="scss">
  .container{
    width: 100px;
    height: 100px;
    background: yellow;
    p{
      color:red
    }
  }
</style>

5.运行起来看看效果(npm run dev)

【注：修改webpack文件之后，必须要重新启动一下项目，不然是没有效果的】