摘要：
可以在vue.config.js中使用css.loaderOptions选项。示例：module。exports={css:{loaderOptions:{sass:{data:`@import“@styles/mixin.scs”；@import”@/styles/variables.scss“；`｝}}，}注意：如果不在此处全局导入样式和变量，则需要在需要使用它们的vue文件的样式标签中导入它们，如下所示：@importimport“~@/styles/sidebard.scs”；……使用某些UI组件时，为了自定义主题颜色，可以在vue.config.js中进行如下设置：module。exports＝｛css：｛loaderOptions:｛less：｛javascript Enabled:true，modifyVars：｛'primary color'：'#254184'，//global main color：@primary color；｝，这样您就可以在＜stylelang=“less”＞中使用此变量：a｛color:@primary color；｝但有时，我需要在js中设置样式，例如绘制画布。
vue中全局设置样式有两种方法：
第一种：只需要在main.js中引入
如global.css
html,body,#app{ height: 100%; margin: 0px; padding: 0px; }
在main.js中引入
import "./styles/index.scss";
import './assets/css/global.css'
import './assets/fonts/iconfont.css'
这样所有的vue组件都有了这个公共样式。
第二种：向预处理器 Loader 传递选项
官网解释：https://cli.vuejs.org/zh/guide/css.html#css-modules
有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有 Sass/Less 样式传入共享的全局变量：
// vue.config.js module.exports = { css: { loaderOptions: { // 给 sass-loader 传递选项 sass: { // @/ 是 src/ 的别名 // 所以这里假设你有 `src/variables.sass` 这个文件 // 注意：在 sass-loader v8 中，这个选项名是 "prependData" additionalData: `@import "~@/variables.sass"` }, // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效 // 因为 `scss` 语法在内部也是由 sass-loader 处理的 // 但是在配置 `prependData` 选项的时候 // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号 // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置 scss: { additionalData: `@import "~@/variables.scss";` }, // 给 less-loader 传递 Less.js 相关选项 less:{ // http://lesscss.org/usage/#less-options-strict-units `Global Variables` // `primary` is global variables fields name globalVars: { primary: '#fff' } } } } }
在这里引入全局样式和变量，这样的话，在vue文件的style标签中就不用引入了。
实例：
module.exports = { css: { loaderOptions: { sass: { data: ` @import "@/styles/mixin.scss"; @import "@/styles/variables.scss"; ` } } }, }
注意：
如果不在这里全局引入样式和变量，那么在需要用到这些样式和变量的地方，你就需要在vue文件的style标签中引入，如下所示:
<style lang="scss" scoped> @import "~@/styles/mixin.scss"; @import "~@/styles/variables.scss"; @import "~@/styles/sidebar.scss"; .... </style>
使用一些UI组件的时候，为了能自定义主题色，可以在vue.config.js里这样设置：
module.exports = { css: { loaderOptions: { less: { javascriptEnabled: true, modifyVars: { 'primary-color': '#254184', // 全局主色 } } } } }
这样能在<style lang="less">中使用该变量：
a { color: @primary-color; }
但是有时候，我需要在js中设置样式，比如绘制canvas。有什么办法可以让我能在js中使用primary-color这个变量呢？
直接import进来使用即可
import config from '../vue.config.js'; export default { data() { return { primaryColor: config.css.loaderOptions.less.modifyVars['primary-color'], }; },
或者用环境变量
// .env VUE_APP_PRIMARY_COLOR=#254184
在vue.config.js中
// vue.config.js module.exports = { css: { loaderOptions: { less: { javascriptEnabled: true, modifyVars: { 'primary-color': process.env.VUE_APP_PRIMARY_COLOR } } } } }
在js文件中引入
// sample.js const primaryColor = process.env.VUE_APP_PRIMARY_COLOR;