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 在解析导入和 URLS 后将所有这些转换为纯 CSS —但另外创建基于 ?localIdentName=[path] 查询参数的本地范围。来自the css-loader docs：

默认情况下，CSS 将所有类名导出到全局选择器范围内。这是一个提供本地选择器范围的功能。

语法:local(.className) 可用于在本地范围内声明className。本地标识符由模块导出。

...

您可以使用localIdentName 查询参数（默认[hash:base64]）配置生成的标识。示例：css-loader?localIdentName=[path][name]---[local]---[hash:base64:5] 以便于调试。

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

此外，您应该不将样式加载器用作加载器配置的一部分，因为默认情况下您不想注入样式；您希望能够 require 样式（以便您可以访问本地）并另外注入它们。这就是为什么样板文件将以下内容作为styles/index.js 的一部分用于每组样式：

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

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

所以，我认为您只需将 webpack 配置更改为：

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