css - React 组件的本地 less 样式表

Question

我使用 redux-easy-boilerplate ( https://github.com/anorudes/redux-easy-boilerplate/tree/master/src ) 开始了一个 React 元素

我真的很喜欢样板中的每个组件如何使用单独的本地 SCSS 文件设置样式。我实际上正在移植一个依赖 LESS 的旧应用程序，我想重用该应用程序的样式。

我试图在这个样板文件中直接用 LESS 替换 SCSS，但我遇到了一个我无法理解的问题。这是其中的一个典型组件:https://github.com/anorudes/redux-easy-boilerplate/tree/master/src/components/Footer .它有一个 styles 目录，其中包含两个文件 - index.js:

import 'style!./styles.scss';
export default require('./styles.scss').locals.styles;

和styles.scss 像这样:

:local(.styles) {
  text-align: center;
  padding: 70px 0 40px;
  ...
}

如果我只是将 scss 文件重命名为 less，我会收到错误消息，指出无法获取未定义(本地)的属性“样式”，指向 index.js 的第二行。我不太了解 SCSS，也不了解 scss 文件的第一行的作用以及它的 LESS 等价物是什么。

顺便说一句，我确实将 LESS 加载器添加到 webpack 配置中:

{
  test: /\.less$/,
  loader: 'style!css!less',
},

Answer 1

我相信这里发生了几件事。

第一件事是，您替换了 SCSS 文件的加载器

loader: 'css?localIdentName=[path]!postcss-loader!sass'

使用这个加载器来处理 Less 文件

loader: 'style!css!less'

但它们并不等同。在前一个配置中，sass 加载器将 SCSS 语法转换为常规 CSS，postcss-loader 根据 PostCSS 运行额外的后处理。 ，并且 css?localIdentName 在解析导入和 URLS 后将其全部转换为纯 CSS——但另外根据 ?localIdentName=[path] 查询参数创建本地范围。来自 the css-loader docs :

By default CSS exports all class names into a global selector scope. This is a feature which offer a local selector scope.

The syntax :local(.className) can be used to declare className in the local scope. The local identifiers are exported by the module.

...

You can configure the generated ident with the localIdentName query parameter (default [hash:base64]). Example: css-loader?localIdentName=[path][name]---[local]---[hash:base64:5] for easier debugging.

因此，如果没有该查询参数，您将无法获得所需 CSS 的 .locals.styles 属性。

此外，您应该不将样式加载器用作加载器配置的一部分，因为您不想默认注入(inject)样式；您希望能够要求 样式(这样您就可以访问本地)并另外 注入(inject)它们。这就是为什么样板将以下内容作为每组样式的 styles/index.js 的一部分:

import 'style!./styles.scss';
export default require('./styles.scss').locals.styles;

第一行注入(inject)样式，第二行导出局部。

所以，我认为您只需要将您的 webpack 配置更改为:

test: /\.less$/,
loader: 'css?localIdentName=[path]!postcss-loader!less',