导入 .less 变量以在 React 样式组件中使用 [重复]答案

【问题标题】：Import .less variables to use within React Styled Components [duplicate]导入 .less 变量以在 React 样式组件中使用 [重复]
【发布时间】：2019-12-12 23:16:31
【问题描述】：

我正在尝试从文件中导入 .lessvariables 以在 styled-component 中使用。这可能吗？

Variables.less

@color1: #e6ae11;
@color2: #d1e4f7;

Component.jsx

import  '../../../../stylesheets/variables.less';
....
const StyledDiv = styled.div`
  text-align: right;
  color: @color1
`;

【问题讨论】：

这能回答你的问题吗？ How to use LESS variable in React JS
我个人在我的堆栈中使用 less 模块（css 模块使用 less），它允许您将所有内容从 less 文件传递到 js。 Here's an article with further details on how to set it up
抱歉，现在是清晨。我将LESS 和CSS 混合在一起，我实际上并不想这样做。对于这种情况，我将坚持使用.less 文件。谢谢大家的帮助

标签： javascript reactjs less styled-components

【解决方案1】：

这是可能的。我猜你使用 Webpack，你只需要配置 webpack 加载器，这样当找到 import '*.less' 时，它：

将 less 编译成 css
将 css 设置为 css 模块

webpack 配置如下所示：

rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              modules: true
            }
          },
          {
            loader: "less-loader"
          }
        ]
      }
    ]

来源：here

请注意，在配置 webpack 加载器时，加载器（在 use 数组中）在编译时以相反的顺序调用。

【讨论】：