在vue项目中全局引入scss文件

第一步:首先安装依赖包:

npm install --save-dev sass-loader

npm install --save-dev node-sass      //sass-loader依赖于node-sass

npm install sass-resources-loader --save-dev     //全局引入scss文件的依赖包

第二步:找到build/utils.js,找到 scss: generateLoaders('sass'),修改如下:

scss: generateLoaders('sass').concat(

      {

        loader: 'sass-resources-loader',

        options: {

          resources: path.resolve(__dirname, '../src/common/scss/index.scss')

        }

      }

    ),

如图所示:


修改成下图


完成这步后,可以在main.js中 import ‘./common/csss/index.scss’   此路径按照你自己的scss文件存放填写

最后npm run dev ,项目跑起来后,引进的scss文件里面的样式,变量等都可以在组件中使用了。

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

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,233评论 0 21
  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 6,732评论 0 16
  • 学习目的 学习前端构建化工具 webpack,能熟练掌握 并使用 webpack 对项目进行打包优化。 ...
    _1633_阅读 1,372评论 0 7
  • 大一 最近没生活费了很难受 但是打电话的时候真的不想要钱 泪目 我怕以后工作的时候也没有钱 我要努力学习
    Mercylee阅读 143评论 0 0
  • 最近加了很多课,到后面退掉的有一大半。以前内心有很多空洞要这些学习来填补,人和人的链接没有,越来越不专注状态常有。...
    以心为师阅读 990评论 0 1