首页 > 其他 > 详细

nuxt项目中使用less全局样式、全局变量的配置

时间:2020-05-08 11:22:17      阅读:995      评论:0      收藏:0      [点我收藏+]

使用less全局变量的配置

1. 配置全局less

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

css: [
    /**
     * 配置全局 css
     */
    ‘element-ui/lib/theme-chalk/index.css‘,
    ‘@assets/styles/global.less‘,
  ],

2. 配置全局 scss 变量

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

modules: [
    // Doc: https://axios.nuxtjs.org/usage
    ‘@nuxtjs/axios‘,
    ‘@nuxtjs/style-resources‘
  ],
	
styleResources:{
    less:[
      ‘./assets/styles/variable.less‘
    ]
  },

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

nuxt项目中使用less全局样式、全局变量的配置

原文:https://www.cnblogs.com/my466879168/p/12849068.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!