坑二： 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 变化
