Note17 vue项目搭建坑坑坑（二）

坑二： scss文件引入
vue 和 webpack升级之后，scss的引入方式有些变化，一些配置需要自己手动写入，否则出错。
官方文档写的很清楚了，只不过以前没有仔细看。
总结：多看官方文档Using Pre-Processors
具体记录如下：
npm install sass-loader node-sass --save-dev 如果npm 安装出错，可以用从cnpm。

build/webpack.base.conf.js中修改rules:

/* 默认代码如下：
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: vueLoaderConfig
}
*/
//  改为如下：
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
    }
  }
}

.vue中使用：

<style lang="sass">  / *  lang="scss" */
  /* write sass here */
</style>

引入外部 .scss 文件，需要：
npm install sass-resources-loader --save-dev
然后修改 build/utils.js 中 generateLoaders(loader, loaderOptions) 方法中的返回值，即 return 对象。

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/styles/index.scss')
        }
      }
    ),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

注释：
../src/styles/index.scss指定 scss文件路径（ex：src/index.scss）。

推荐阅读资料： [译] Vue 2.0 的变化（一）之基本 API 变化