vue项目引入sass

一、npm安装node-sass，sass-loader，使用save保存到package.json

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

二、增加webpack配置

1、打开webpack配置文件，在module -> rules增加配置

rules: [{
        // ...
        },
        {
          test: /\.scss$/,
          loader: ['vue-style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.sass$/,
          use: [
            'vue-style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              options: {
                sassOptions: {
                  indentedSyntax: true
                }
              }
            }
          ]
        },
        {
         // ...
        }
      ]

2、webpack2中的配置

rules: [
        // {test: /\.svg$/, loader: 'url-loader'},
        {test: /\.scss$/, loader: [ 'vue-style-loader', 'css-loader', 'sass-loader']},
        {test: /\.sass$/, loader: [ 'vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']},
        // {test: /\.vue$/, loader: 'vue-loader', options: {loaders: {js: {loader: 'babel-loader', options: {presets: ['env'], plugins: ['transform-object-rest-spread']}}}}}
      ]

三、vue文件中使用

<template>
  <div>
    <div class="parent">
      <div class="children">子节点</div>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="sass">
 .parent
  text-algin: center
  .children
    font-size: 12px
</style>