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

我有一个react应用程序，其结构与以下类似：

- 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;
}

如果在应用程序根目录中导入样式表（在本例中为

\u colors.less

），如何在文件（如

app.less

）中使用less变量而不导入必要的样式表

网页包里有什么我需要做的吗？以下是我当前的网页外观。谢谢

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;

您可以使用lessloader选项来预先设置变量文件

其思想是读取文件并返回其内容

//webpack.config.js
module.exports={
模块：{
规则：[
{
测试：/\.减去$/,，
使用：[
“样式加载器”，
“css加载器”，
{
加载器：“更少的加载器”，
选项：{
附加数据：（内容，加载上下文）=>{
const variables=fs.readFileSync（'path-to-your/_varaibles.less'）；
返回变量+内容；
},
},
},
],
},
],
},
};

感谢@felismosh的帮助，但是，在遵循这些说明时，我仍然会遇到一个错误。您可以看到[本回购协议]的实施。当我运行

纱线启动
时，我发现一个错误，repo链接丢失道歉，可以在这里找到：