vue项目中，配置全局scss变量 |
您所在的位置：网站首页 › vue公共样式写在哪个文件里 › vue项目中，配置全局scss变量 |
vue项目中，配置全局scss变量
|
vue项目中，配置全局scss变量
原创
wx6409a261df68a 2023-03-13 14:40:16 博主文章分类：webpack ©著作权 文章标签 vue css 重启 配置文件 文章分类 代码人生 ©著作权归作者所有：来自51CTO博客作者wx6409a261df68a的原创作品，请联系作者获取转载授权，否则将追究法律责任如下图所示，在imports.scss文件中的css变量，想要在单个vue组件中使用
step1：自动化导入样式文件 ( 用于颜色、变量、 mixin 等 ) ，可以使用 style-resources-loader 。
npm i -D style-resources-loader step2：在webpack配置文件中，增加以下配置即可 const path = require("path"); function addStyleResource(rule) { rule.use("style-resource") .loader("style-resources-loader") .options({ patterns: [path.resolve(__dirname, "./src/styles/imports.scss")], }); } module.exports = { chainWebpack: (config) => { const types = ["vue-modules", "vue", "normal-modules", "normal"]; types.forEach((type) => addStyleResource(config.module.rule("scss").oneOf(type)) ); }, };step3：重启项目 npm run dev 赞 收藏 评论 分享 举报上一篇：element-ui树形组件实现懒加载、右键新增、右键删除、右键编辑，以及拖拽更换节点 下一篇：常见浏览器内核 |
【本文地址】