参考：https://blog.csdn.net/qq_41387882/article/details/106294485

Nuxt配置全局less

https://blog.csdn.net/my466879168/article/details/105990174/?utm_term=lessnuxt%E5%85%A8%E5%B1%80&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-0-105990174&spm=3001.4430

1. 配置全局less

使用less先安装less less-loader,nuxt会自动识别导入的后缀名，在nuxt.config.js中配置

  1. css: [
  2.     /**
  3.      * 配置全局 css
  4.      */
  5.     'element-ui/lib/theme-chalk/index.css',
  6.     '@assets/styles/global.less',
  7.   ],

2.配置全局 scss 变量

为页面注入变量可以使用@nuxtjs/style-resources 来实现安装yarn add @nuxtjs/style-resources -D配置nuxt.config.js

  1. modules: [
  2.     // Doc: https://axios.nuxtjs.org/usage
  3.     '@nuxtjs/axios',
  4.     '@nuxtjs/style-resources'
  5.   ],
  7. styleResources:{
  8.     less:[
  9.       './assets/styles/variable.less'
  10.     ]
  11.   },

styleResources 配置的资源路径不能使用 ~ 和 @,要使用绝对或者相对路径

nuxt.config参考配置

  1. const path = require('path')
  2. import lessToJs from 'less-vars-to-js';
  3. import { resolve } from 'path'
  4. import fs from 'fs';
  5. const globalLess = fs.readFileSync('./static/css/theme.less', 'utf8'); // 读取文件
  6. const theme = lessToJs(globalLess) // less文件转换为JS文件
  8. console.log(process.env.VUE_APP_TITLE, '======== nuxt.config.js ======');
  10. const plugins = [
  11.   ["@babel/plugin-proposal-private-methods", { "loose": true }]
  12. ]
  13. if (process.env.VUE_APP_TITLE === 'production') {
  14.   plugins.push("transform-remove-console")
  15. }
  17. // todo 配置多环境参数
  18. const config = {
  19.   production: {
  20.     'tradeCenterUrl': 'http://IP地址:端口',
  21.     'rzlineUrl': 'http://IP地址:端口',
  22.     'ws': 'wss://地址',
  23.     'oss': { // OSS配置
  24.       "region": "",
  25.       "accessKeyId": "",
  26.       "accessKeySecret": "",
  27.       "bucket": "",
  28.       "endpoint": "",
  29.       "cname": true
  30.     }
  31.   },
  32.   test: {
  33.     'tradeCenterUrl': 'http://IP地址:端口',
  34.     'rzlineUrl': 'http://IP地址:端口',
  35.     'ws': 'wss://地址',
  36.     'oss': {  // OSS配置
  37.       "region": "",
  38.       "accessKeyId": "", 
  39.       "accessKeySecret": "", 
  40.       "bucket": "", 
  41.       "endpoint": "", 
  42.       "cname": true 
  43.     }
  44.   },
  45.   development: {
  46.     'tradeCenterUrl': 'http://IP地址:端口',
  47.     'rzlineUrl': 'http://IP地址:端口',
  48.     'oss': { // OSS配置
  49.       "region": "",
  50.       "accessKeyId": "",
  51.       "accessKeySecret": "",
  52.       "bucket": "",
  53.       "endpoint": "",
  54.       "cname": true
  55.     }
  56.   }
  57. }
  59. export default {
  60.   env: {
  61.     VUE_APP_TITLE: process.env.VUE_APP_TITLE,
  62.     baseURL: '/api',
  63.     config
  64.   },
  66.   // Global page headers: https://go.nuxtjs.dev/config-head
  67.   head: {
  68.     title: 'title',
  69.     htmlAttrs: {
  70.       lang: 'en'
  71.     },
  72.     meta: [
  73.       { charset: 'utf-8' },
  74.       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  75.       //   { hid: 'description', name: 'description', content: '' }
  76.     ],
  77.     link: [
  78.       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  79.     ]
  80.   },
  82.   router: {
  83.     // 加上base: '/'会导致svg的图标刷新页面不展示
  84.     // base: '/'
  85.   },
  87.   // 设置别名
  88.   alias: {
  89.     '@a': resolve(__dirname, './assets'),
  90.     '@c': resolve(__dirname, './components'),
  91.     '@p': resolve(__dirname, './pages')
  92.   },
  94.   // Global CSS: https://go.nuxtjs.dev/config-css
  95.   css: [
  96.     'ant-design-vue/dist/antd.less' // UI框架的CSS引入
  97.   ],
  99.   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  100.   plugins: [
  101.     '@/plugins/antd-ui', // UI框架
  102.     "@/plugins/axios_interceptors", // axios的配置
  103.     "@/plugins/api/api", // 全局api的维护
  104.     "@/plugins/my-prototype.js", // 在client和service上生效
  105.     { src: '~/plugins/my-plugins.client.js', mode: 'client' }, // 只在client上生效
  106.     { src: '~/plugins/dict.js' }, // 数据字典
  107.     { src: "~/plugins/vue-swiper.js", ssr: false }, // 滚动动画
  108.     { src: '@/plugins/icons', ssr: true }, // svg图片引入
  109.     '~/plugins/lodash', // 请求延缓
  110.   ],
  112.   // 中间件
  113.   serverMiddleware: [
  114.     { path: '/middlewar', handler: '@/server-middleware/middlewar.js' }
  115.   ],
  117.   // Auto import components: https://go.nuxtjs.dev/config-components
  118.   components: true,
  120.   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  121.   buildModules: [
  122.   ],
  124.   // Modules: https://go.nuxtjs.dev/config-modules
  125.   modules: [
  126.     '@nuxtjs/axios', // 为了使用axios进行请求
  127.     '@nuxtjs/style-resources', // 为了处理less的文件
  128.     'cookie-universal-nuxt', // 为了将store数据缓存到cookie中，进行vuex数据的缓存（不适宜配置多个数据，因为cookie的数据是会传输到后台的）
  129.     'vue-social-sharing/nuxt' // 分享
  130.   ],
  132.   // 引入公共的less
  133.   styleResources: {
  134.     less: [
  135.       './assets/css/global.less',
  136.     ]
  137.   },
  139.   axios: {
  140.     // 配置请求基础路径
  141.     // baseURL: 'http://localhost:80',
  142.     proxy: true,
  143.     // 配置失败之后重复请求的次数retries
  144.     retry: { retries: 1 },
  145.     headers: {
  146.       common: {},
  147.       post: {
  148.         'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  149.       }
  150.     }
  151.   },
  153.   // 设置代理
  154.   proxy: {
  155.     "/api": {
  156.       target: config[process.env.VUE_APP_TITLE].url,
  157.       ws: true, // 代理websockets
  158.       changeOrigin: true, // 是否跨域，虚拟的站点需要更管origin
  159.       pathRewrite: {
  160.         '^/api': '/'
  161.       }
  162.     },
  163.   },
  165.   // Build Configuration: https://go.nuxtjs.dev/config-build
  166.   build: {
  167.     // 解决 启动 报Though the “loose“ option was set to “false“ in your @babel/preset-env config, it will not ...
  168.     babel: {
  169.       plugins
  170.     },
  171.     loaders: {
  172.       less: {
  173.             // 配置全局的颜色（更改ant-design的主题色）
  174.           modifyVars: theme,
  175.           javascriptEnabled: true
  176.       }
  177.     },
  178.     extend (config, ctx) {
  179.       // todo svg (svg配置)
  180.       const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
  181.       svgRule.exclude = [path.resolve(__dirname, 'icons/svg')]
  182.       // Includes /icons/svg for svg-sprite-loader
  183.       config.module.rules.push({
  184.         test: /\.svg$/,
  185.         include: [path.resolve(__dirname, 'icons/svg')],
  186.         loader: 'svg-sprite-loader',
  187.         options: {
  188.           symbolId: 'icon-[name]'
  189.         }
  190.       })
  191.     }
  192.   },
  194.   // 启动端口号
  195.   server: {
  196.     port: 3001, // default: 3000
  197.     host: '0.0.0.0'
  198.   }
  199. }