在带有组件导入的 .less 文件的反应项目中使用 LESS 变量答案

【问题标题】：Using LESS variables in a react project with .less files imported by the components在带有组件导入的 .less 文件的反应项目中使用 LESS 变量
【发布时间】：2020-02-14 19:24:56
【问题描述】：

我在一个 react 项目中，使用 webpack 编译，使用 less。应用程序的根目录导入了一个顶级 styles.less，它导入了 variables.less，它定义了一堆 LESS 变量。

还有一个目录components，里面有很多文件夹，每个文件夹都有一个styles.less和一个导入它的index.jsx。

目前，如果我尝试从组件访问变量（例如 Card/styles.less），我会收到“变量 [x] 未定义”错误。

有没有办法让项目中的所有变量都可以“全局访问”这些变量？

版本：

反应 16.7
webpack 4.28
通天塔7.5
小于 3.9
less-loader 5.0

webpack 配置

   module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'less-loader',
                        options: {
                            modifyVars: { // this modifies the antd variables
                                'primary-color': '#5c31a8',
                                'border-radius-base': '2px'
                            },
                            javascriptEnabled: true
                        }
                    }
                ]
            }
        ]
    },

【问题讨论】：

标签： reactjs webpack less

【解决方案1】：

我之前也遇到过同样的问题，我想我会添加我的解决方案，以防其他人偶然发现：

你可以编写一个自定义的 Webpack 加载器来预加载更少的文件：

lessImports.js

const loaderUtils = require('loader-utils');
const reduce = require('lodash/reduce');

const getFileNames = ({ files, fileName }) => {
  const index = files.indexOf(fileName);
  if (index >= 0) {
    return files.slice(0, index);
  }
  return files;
};

const addNewImports = ({ file, source, alias }) =>
  reduce(
    file,
    (existingFiles, file) => {
      return `${existingFiles}\n @import "${alias}/${file}.less";`;
    },
    source,
  );

const addGlobalImports = ({ files, fileName, source, alias }) => {
  const getFiles = getFileNames({
    files,
    fileName,
  });
  return addNewImports({
    files: getFiles,
    source,
    alias,
  });
};

module.exports = function lessImport(source) {
  const options = loaderUtils.getOptions(this);

  const fileType = loaderUtils.interpolateName(this, '[ext]', {});
  const fileName = loaderUtils.interpolateName(this, '[name]', {});
  const files = (options && options.files) || [];
  const alias = (options && options.alias) || '';

  let processedLess = source;
  if (fileType === 'less') {
    processedLess = addGlobalImports({
      files,
      fileName,
      source,
      alias,
    });
  }

  return processedLess;
};

并将其加载到 Webpack 配置中：

  module: {
    rules: [
      {
        test: /\.(less)$/,
        use: [
          {
            loader: 'less-loader', // compiles Less to CSS
          },
          {
            loader: 'lessImports.js',
            options: {
              files: ['variables'],
              alias: '~less',
            },
          },
        ],
      },
    ],
  },

【讨论】：

【解决方案2】：

长话短说，有一个库：https://www.npmjs.com/package/less-vars-to-js。

请注意，有一些方法可以将 SASS 和 CSS 变量导出到 JS。我没有看 LESS 是如何工作的，所以你也可以尝试一下。

SASS:https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

CSS:https://css-tricks.com/updating-a-css-variable-with-javascript/

【讨论】：

我认为这不能满足我的需要——这将允许我在 JS 中使用变量（例如，使用样式组件）——它不允许我从 /MyComponent/styles 访问它。少
如果是less到less的文件，可以直接用@import "*.less";导入文件吗？