更改框架的主题色

ant-design-vue

参考:
https://www.jianshu.com/p/58bc82a99f10
https://blog.csdn.net/weixin_43459866/article/details/112237617

在nuxt项目中如果使用了UI框架如antd vue、element等，主题定制配置是不可避免的问题。nuxt.config.js按照如下配置即可（以antd vue 为例）

// 使用less-var-to-js将less的文件转换成为js文件,放入配置中.(lessToJs的配置文件只能放入公共的单个配置:例如@primary-color: #ddd;)
import lessToJs from 'less-vars-to-js';
// 设置全局的less
const globalLess = fs.readFileSync('./assets/css/theme.less', 'utf8');
const theme = lessToJs(globalLess)
// Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'ant-design-vue/dist/antd.less',
    'swiper/css/swiper.css'
  ],
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/style-resources'
  ],
// Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    // 解决 启动 报Though the “loose“ option was set to “false“ in your @babel/preset-env config, it will not ...
    babel: {
      plugins: [
        ["@babel/plugin-proposal-private-methods", { "loose": true }]
      ]
    },
    loaders: {
      less: {
          modifyVars: theme,
          javascriptEnabled: true
      }
    },
    extend (config, ctx) {
      // todo svg
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
      svgRule.exclude = [path.resolve(__dirname, 'icons/svg')]
      // Includes /icons/svg for svg-sprite-loader
      config.module.rules.push({
        test: /\.svg$/,
        include: [path.resolve(__dirname, 'icons/svg')],
        loader: 'svg-sprite-loader',
        options: {
          symbolId: 'icon-[name]'
        }
      })
    }
  },

theme.less

// ! 主题色
@primary-color: #ff6a00;