导入 .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' 时，它 :

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

webpack 配置如下所示：

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

来源：here

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

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

Import .less variables to use within React Styled Components

javascript

less

reactjs

styled-components