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，我会收到错误消息，指出无法获取属性＆＃39;样式＆＃39; undefined（是本地人），指向index.js的第二行。我不太了解SCSS，也不了解scss文件的第一行是什么，以及它的LESS等价物是什么。

BTW，我确实将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]）配置生成的ident。示例：css-loader?localIdentName=[path][name]---[local]---[hash:base64:5]以便于调试。

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

此外，你应该不使用样式加载器作为加载器配置的一部分，因为你不想默认注入样式;你希望能够要求样式（这样你就可以访问本地人）并且另外注入它们。这就是为什么样板文件对于每组样式都具有styles/index.js的一部分：

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

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

因此，我认为您只需将webpack配置更改为：

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

React组件的本地更少样式表

1 个答案: