记录问题帖:webpack 配置全局less ,安装style-resources-loader插件

77 阅读1分钟

项目基础配置版本为:webpack 4.16,less 3.8.1,vue 2.5;局部less变量可用,全局less变量使用提示undefined,解决方法为安装style-resources-loader插件,在webpack.base.conf.js配置全局的路径地址,完美解决;

  1. 安装style-resources-loader 用 vue add style-resources-loader命令无效,用npm安装

npm i style-resources-loader npm i vue-cli-plugin-style-resources-loader

  1. 安装成功之后配置webpack.base.conf.js
     // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
            },
          },
          'postcss-loader',
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true, // 别忘了这个!
              // 单独配置全局变量部分,
              // globalVars: {
              //   testcolor: 'red',
              // },
              // modifyVars: {
              //   'primary-color': '#1DA57A',
              // },
            },
          },
          {
            loader: 'style-resources-loader',
            options: {
              patterns: path.resolve(__dirname, '../src/assets/css/global.less'), // 注意路径
            },
          },
        ],
      },

多尝试,办法总比困难多。