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

Question

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

Variables.less

@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'时使用它：

• 更少地编译为CSS
• 将CSS设置为CSS模块

webpack的配置如下：

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

来源：here

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