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.jsgenerateLoaders(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 变化

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容