如何在webpack+vue.js下配置使用scss

作为一个vue新手,想要搭建脚手架的时候,发现有内置的webpack方案,美中不足的是没有使用scss,找了很多地方感觉很多都没有说清楚,于是记录一下。

vue提供了初始化的webpack模板,其中使用了vue-loader。

vue-loader默认只支持sass, 要是想要使用scss,必须安装

node-sass和sass-loader,

然后再webpack的配置文件中添加

module.exports = {

  vue: {

    loaders: {

      scss: ['vue-style-loader','css', 'sass'].join('!')

    },

  }

}

然后在.vue格式的模板中,style 标签中添加 lang='scss' 就可以了。

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

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,519评论 1 32
  • 原文http://www.cnblogs.com/libin-1/p/6596810.html 版本号 vue-c...
    tengrl阅读 3,737评论 0 0
  • webpack 是什么? 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(mo...
    IT老马阅读 3,372评论 2 27
  • 构建工具逐渐成为前端工程必备的工具,Grunt、Gulp、Fis、Webpack等等,译者有幸使用过Fis、Gul...
    陈坚生阅读 6,074评论 4 64
  • 上次跟大家分享了“冰山模型”,不知道大家有没有用它解决过实际工作或生活中遇到的问题呢?如果有,那么恭喜你,你已经将...
    Sharon_程阅读 343评论 0 1