模块 scss & 符号类选择器不起作用

Question

我有一个简单的 scss 文件

.navItem {
  cursor: pointer;
    
  &.active {
    color: $primaryPurple;
  }
    
  &:hover {
    color: $primaryPurple;
  }
    
  span {
    margin-left: 10px;
  }
}

出于某种原因，:hover有效但.active不起作用。正如您在下图中所看到的，li显然有活动类，但我没有看到字体颜色 css 发生了变化。

Answer 1

TL;DR：将名称作为 JavaScript 对象传递，而不是像一个简单的字符串。

其实这个问题来自于css-modules配置。显然，基于AdminSideBar_navItem__1aFBc嵌入图片中的。您css-modules在 Webpack 配置中的配置是：

// webpack config

module.exports = {
  ~~~
  module: {
    ~~~

    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: '[name]_[local]_[hash:base64:5]', // <=== Attention to this line
                sourceMap: true,
              }
            },
            ~~~
          ],
       }),
    ],
  },
  ~~~
};

因此，当您使用css-modules它时，意味着您将拥有如此专业的优势，例如更压缩的 css 包文件或完整散列的不可读的丑化包。为了这些好处，你应该像 JavaScript 对象一样使用 CSS 类名，注意下面的 ReactJS 代码和 using css-modules：

import React from 'react';
import cn from 'classnames'; // <=== install it to have easy coding
import styles from '[pathToScssFiles]/styles.scss';

const MyComponent = ({ isActive }) => (
  <li className={cn(styles.navItem, isActive && styles.active)} />
);

我希望你明白我的意思，你通过styles.active一个简单的字符串："active"。所以css-modules不能把你的类名作为一个对象，并把它作为一个简单的字符串传递给它，因此，"active" **BUT** in the CSS bundle file the css-modules use the'[name] [local] [hash:base64:5]'` 模式来变形它的名字。

你:hover应该工作，它工作，因为任何人都不能改变它，它是一个伪类。

当然，为 编写一个奇怪的属性.active：

.navItem {
  cursor: pointer;
    
  &.active {
    fill: yellow;
  }

现在fill: yellow在 Webpack 为你制作的 CSS 包中寻找。你看它是：

.navItem {
  cursor: pointer;
    
  &.active {
    fill: yellow;
  }

注：该~~~手段等。