如何在不导入样式表的情况下使用 Less 变量

Question

我有一个与以下结构类似的反应应用程序：

- src/
  - index.tsx
  - index.less
  - app/
    - app.tsx
    - app.less
  - styles/
    - _colors.less

我想使用我的应用程序，这样我就不必导入每个样式表。我想要的是以下内容：

-- index.less --

@import "~styles/_colors";

-- _colors.less --

@blue: #14A8F3;

-- app.less --

.sampleApp {
  background: @blue;
}

如果我在应用程序的根目录中导入样式表（在本例中为 _colors.less），如何在不导入必要的样式表的情况下在 app.less 等文件中使用我的 less 变量？

我需要在 webpack 中做些什么吗？这是我当前的 webpack 的样子。谢谢！

webpack.common.js：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const SRC_DIR = path.resolve(__dirname, 'src');

const entry = [
  'babel-polyfill',
  `${SRC_DIR}/index.tsx`,
  `${SRC_DIR}/index.less`,
];

const rules = [
  {
    test: /\.tsx?$/,
    use: 'ts-loader',
    exclude: /node_modules/,
  },
  {
    test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
    ],
  },
  {
    test: /\.less$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      'postcss-loader',
      {
        loader: 'less-loader',
        options: { javascriptEnabled: true },
      },
    ],
  },
];

const plugins = [
  new MiniCssExtractPlugin({
    filename: 'application.css',
  }),
];

const config = {
  entry,
  output,
  module: { rules },
  plugins,
  resolve,
};

module.exports = config;

Answer 1

您可以使用less-loader 的additionaldata 选项来添加变量文件。

这个想法是读取文件，并返回它的内容。

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              additionalData: (content, loaderContext) => {
                const variables = fs.readFileSync('path-to-your/_varaibles.less');

                return variables + content;
              },
            },
          },
        ],
      },
    ],
  },
};