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 等价物是什么。

顺便说一句，我确实在 webpack 配置中添加了 LESS 加载器：

{
  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]查询参数创建本地范围。来自css-loader 文档：

默认情况下，CSS 将所有类名导出到全局选择器作用域中。这是一个提供本地选择器作用域的特性。

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

...

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

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

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

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

第一行注入样式，第二行导出本地。

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

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