Vue 项目配置 SCSS

为 Vue 2 + webpack 项目接入 SCSS：安装依赖、改 loaders、模板声明。

####1. 安装对应依赖node模块：

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

####2. 打开webpack.base.config.js在loaders里面加上

	rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
  +---
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },
  +---
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }

####3. 在用scss的地方写上

	<style lang="scss" type="text/css"></style>

scss文档

速查

# 安装 sass 相关依赖
npm install node-sass --save-dev
npm install sass-loader --save-dev

<!-- 单文件组件中声明 lang="scss" -->
<style lang="scss" type="text/css"></style>

场景	关键点
编译报错找不到 sass	确认装了 `node-sass` + `sass-loader`
样式不生效	记得加 `lang="scss"`