vue-cli全局引入scss文件

1、在vue项目中使用scss,必须先安装下面这三个插件:

npm install node-sass --save-dev

npm install sass-loader --save-dev

npm install style-loader --save-dev

2、我们想要全局引用scss,需要安装插件:

npm install sass-resources-loader --save-dev

3.在build/utils.js文件中修改配置,把scss: generateLoaders('sass')改为:

    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
            //你自己的scss全局文件的路径
          resources: path.resolve(__dirname, '../src/common/scss/index.scss')
        }
      }
    ),

,如下:

 

-------------到了说明重点的时候了--------------

上面的代码,我不知道为什么,我的reset.scss文件貌似没有起作用,但是单独定义的其他样式属性却能起作用,所以我在网上看到别人的代码中引入全局css样式的时候还可以直接在main.js中引入,所以我就照着他们说的试了一下,可以了,为了避免重复引入问题,我就把reset.scss文件在main.js里面引入了,上面utils.js中就没再引入

啊啊啊啊啊,突然想到,我不管是在main.js中还是在utils.js中引入感觉应该是一样的,我如果单纯的想重置浏览器样式的话,完全可以在app.vue文件中引入reset.scss文件就可以了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值