css - React 组件的本地较少样式表

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'

使用此加载程序来处理较少的文件

loader: 'style!css!less'

但它们并不等同。在前面的配置中，sass 加载器将 SCSS 语法转换为常规 CSS，postcss-loader 基于 PostCSS 运行额外的后处理。 ，并且 css?localIdentName 在解析导入和 URL 后将其全部转换为纯 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',