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 傳遞選項

官網(wǎng)解釋：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’],
};
},

或者用環(huán)境變量
// .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;文章來源地址http://www.zghlxwxcb.cn/news/detail-403357.html

到了這里，關于vue設置全局樣式：loadOptions的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！