使用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 配置的资源路径不能使用 ~ 和 @,要使用绝对或者相对路径

1.安装;

npm install sass-resources-loader --save-dev

2. 在文件中创建一个  .less 的文件 

3. 在build文件夹中的utils.js文件中

 

代码片段 

 return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, '../src/assets/color.less')
      }
  }),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

 4.在app.vue中引入 .less 文件 即可在所有子组件里使用

 

 

 

前言：使用create-react-app脚手架搭建的react项目，会自带css和sass，但是没有less,如果在项目中需要使用less，需要进行下载并进行一些配置。
1.配置：
（1）暴露webpack配置文件。create-react-app搭建的项目看不到webpack相关配置文件，因此需要输入命令npm run eject将文件暴露出来


打开webpack.config.js文件，在42行加入

const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;  
复制代码
在455行加入
 {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({ importLoaders: 3 }, 'less-loader'),          
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                 {
                    importLoaders: 3,
                    modules: true,
                    getLocalIdent: getCSSModuleLocalIdent,
                    modifyVars:{
                      'primary-color': '#1DA57A',
                      'link-color': '#1DA57A',  
                      'border-radius-base': '2px',
                    },
                    javascriptEnabled: true,
                },
                   'less-loader'
             ),
            },
复制代码
保存即可
2.下载：控制台输入yarn add less less-loader --save

3.建立less文件，此处为省事直接在src文件夹下建了一个common.less文件



保存即能看到样式已经应用