webpack.config.js 没有设置全局 less 变量

Question

知道为什么这个 webpack.config.js 没有设置全局 LESS 变量：current-vehicle 定义于：/resources/scripts/theme.js?

/webpack.config.js

const merge = require("webpack-merge");
const path = require("path");
const baseConfig = require("laravel-mix/setup/webpack.config");

require('dotenv').config();

/**
 * Update the output directory and chunk filenames to work as expected.
 *
 * @param {object} config - The webpack config
 *
 * @return {object} The updated webpack config
 */
const addOutputConfiguration = config => {
  const publicPath = process.env.CDN_URL + '/js/';
  return merge(config, {
    output: {
      path: path.resolve(__dirname, "public/cdn/js"),
      publicPath,
      chunkFilename: "[name].js"
    },
    module: {
      loaders: [
        {
          loader: 'less-loader',
          options: {
            modifyVars: require("./resources/scripts/theme")
          }
        },
      ],
    },
  });
};

module.exports = addOutputConfiguration(baseConfig);

这里有完整的回购协议：https://github.com/tlg-265/issue-import-less.local

设置

$ git clone https://github.com/tlg-265/issue-import-less.local
$ cd issue-import-less.local
$ npm i
$ npm run watch

Then open with the browser (you do NOT need a server).

LESS 变量：current-vehicle 在这里读取：

https://github.com/tlg-265/issue-import-less.local/blob/master/resources/assets/js/components/controls/ModalWindow/ModalWindow.less#L1

当您这样做时：$ npm run watch，您会收到错误：Variable @current-vehicle is undefined，如下面的屏幕截图所示：

理想情况下，当你运行它时，你应该在浏览器上得到以下内容：

点击 link 时，您应该得到：

但很遗憾我还没能到达那里。

知道如何让它发挥作用吗？

提前致谢！

Answer 1

你这部分配置让我震惊：

    module: {
      loaders: [ // <==== !!!!!! here
        {
          loader: 'less-loader',
          options: {
            modifyVars: require("./resources/scripts/theme")
          }
        },
      ],
    },

我记得loaders键是给Webpack version 1 or 2的，version 3之后强烈推荐使用rules，请改成rules试试看。我不知道，也许它来自 Laravel webpack 配置。

无论如何，请在 less-loader 之后添加此加载程序：

{ 
  loader: 'text-transform-loader',
  options: {
    prependText: '@import "./resources/scripts/theme.less"',
  },
},

webpack.config.js 没有设置全局 less 变量

webpack.config.js not setting global less variable

node.js

reactjs

webpack

laravel-mix

less-loader

设置