203 字
1 分钟
style-resources-loader配置全局scss变量
前言
在variables.scss文件内定义如下变量
$background-color-header: #262626;$background-color-sidebar: #333;$background-color-main: #f2f2f2;想让这些变量在其他地方也能直接使用该怎么办呢?只能像下面这样专门引入了
@import "@/assets/scss/variables.scss";那么我们不想引入,想直接在全局使用该怎么办?这时候就要用到我们的style-resources-loader啦
*也支持less哟,安装时把node-sass和sass-loader改为less和less-loader就好了~
安装
npm i style-resources-loader -Dnpm i vue-cli-plugin-style-resources-loader -Dvue cli3配置
具体见仓库地址
在vue.config.js中配置:
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
分享
如果这篇文章对你有帮助,欢迎分享给更多人!
style-resources-loader配置全局scss变量
https://marrydream.top/posts/实用工具/style-resources-loader配置全局scss变量/ 部分信息可能已经过时
相关文章 智能推荐