茉莉兰亭


偏安一隅

style-resources-loader配置全局scss变量

  • 1120 字
  • 次阅读

前言

在variables.scss文件内定义如下变量

1
2
3
$background-color-header: #262626;
$background-color-sidebar: #333;
$background-color-main: #f2f2f2;

想让这些变量在其他地方也能直接使用该怎么办呢？只能像下面这样专门引入了

1
@import "@/assets/scss/variables.scss";

那么我们不想引入，想直接在全局使用该怎么办？这时候就要用到我们的style-resources-loader啦
*也支持less哟，安装时把node-sass和sass-loader改为less和less-loader就好了~

安装

1
2
3
npm i sass-loader@7.x node-sass@4.x -D
npm i style-resources-loader -D
npm i vue-cli-plugin-style-resources-loader -D

vue cli3配置

具体见仓库地址

在vue.config.js中配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require('path')
module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'scss',
            patterns: [
                // 这个是绝对路径,不能使用 alias中配置的别名路径，如@表示的src
                path.resolve(__dirname, './src/assets/style/_variables.scss'),
                path.resolve(__dirname, './src/assets/style/_mixins.scss')
            ]
        }
    }
}

配置参数

  • patterns：字符串或数组，表示导入资源的路径，必须是绝对路径
  • injector：’prepend’ 或者 ‘append’， 表示资源导入的位置，在之前还是之后，样式后导入的会覆盖前面导入的
  • resolveUrl： 是否允许@import形式导入，默认true
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
,