vue設置全局樣式：loadOptions

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;