天天看点

在vue中引用全局的SCSS样式

问题描述

发现公司所做的VUE项目虽然引入了SCSS,并且做了公共样式的封装,但是在引用的时候却在每个组件写样式的地方都在引入了一遍,很明显,这样的代码是冗余不必要的。于是我重新做了在全局引入scss的公共样式。

技术实现

  1. 在src的assests 下新建一个global.scss文件,把全局样式或者要复用的样式放到这里
    在vue中引用全局的SCSS样式
  2. 修改build中文件如下
    在vue中引用全局的SCSS样式

贴上上面的代码

scss: generateLoaders('sass').concat(
    {
    loader: 'sass-resources-loader',
    options: {
        resources: path.resolve(__dirname, './../src/assets/styles/global.scss')
    }
    }
),
           

特别要注意的是resources: path.resolve(__dirname, ‘./…/src/assets/styles/global.scss’) 这个地方一定要按照自己文件位置按相对路径引入!!!