0


vue设置全局样式:loadOptions

vue设置全局样式:loadOptions

vue中全局设置样式有两种方法
**

1. 第一种:只需要在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组件都有了这个公共样式。

2. 第二种:向预处理器 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标签中引入,如下所示:

使用一些UI组件的时候,为了能自定义主题色,可以在vue.config.js里这样设置:

module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
‘primary-color’: ‘#254184’, // 全局主色 }
}
}
}
}

这样能在

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;


本文转载自: https://blog.csdn.net/qq_41617861/article/details/127239353
版权归原作者 点点充 所有, 如有侵权,请联系我们删除。

“vue设置全局样式:loadOptions”的评论:

还没有评论