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


需求:在用vue-cli开发项目的时候,有这样的一个需求:我有个.scss的公共文件需要在项目的每个 .vue 文件使用,而不用分别在.vue文件中引入。这个时候就需要用到 sass-resources-loader 。

(1)第一步:
首先要下载 : sass-resources-loader

npm install sass-resources-loader –save-dev

(2)第二步,在项目里找到build/utils文件。并找到下图位置

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

然后在scss: generateLoaders(‘sass’)后面加上以下代码:

.concat(
      {
        loader: 'sass-resources-loader',
        options: {
          // 需要全局引入的sass文件,这里引入了的scss文件,在所有的.vue文件都可以用到这份css样式,
          // 下面的resources接受一个数组,可以添加多个scss文件
          resources: [path.resolve(__dirname, '../src/assets/sass/index.scss')]
        }
      }
    )
    
    

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

(3)此时文件已经配置成功,需要重启npm run dev服务才可以看到效果.

(4) 如果要导入多个文件,有两种办法:

1、在上面代码的resources数组选项增加多一个scss文件路径。
2、在上面的index.scss文件里用@import引入其他scss文件。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>