javascript - 导入 .less 变量以在 React 样式组件中使用

Question

我正在尝试导入.less文件中的变量在 styled-component 中使用。这可能吗？

变量较少

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

Component.jsx

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

Answer 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 数组中)会在编译时以相反的顺序调用。