React+Sass+Webpack 本地样式问题答案

【问题标题】：React+Sass+Webpack local styling issueReact+Sass+Webpack 本地样式问题
【发布时间】：2016-11-30 10:06:32
【问题描述】：

我正在使用 3rd party react component，但我无法正确配置我的 sass。这个组件创建了一系列<li> html 标签，如果其中一个<li> 被点击，它会添加一个“活动”类名：<li class="active">。我想为那个 active <li> 元素自定义 CSS。为此，我创建了一个包含以下内容的 Test.scss 文件：

.tag_input li.active {
  font-weight: bold;
  text-decoration: underline;
  color: red;
}

要使用这种样式，我做了以下反应

import classes from './Test.scss'
export const Test = (props) => {
  return (
    <ReactTags
        classNames={{
            tags: classes.tag_input,
        }}
     ... 
    >
  )
}

问题是Webpack在加载这个Sass文件时，使用css-loader，它将每个本地.sass文件中的每个类名转换成如下格式：“localIdentName=[name]_[local]__[hash:base64 ：5]”。这意味着我的 CSS 不再适用于 <li class="active">。相反，它现在适用于<li classname="Test__active___2LBGS">。到目前为止，我已经想到了两个（不好的）解决方案：

我以某种方式重新配置 webpack 以不使用 localIdentName 重命名某些 css 类名
我以某种方式让<ReactTags /> 使用类名：Test__active___2LBGS

这些似乎都不可行，所以我很困惑！任何帮助深表感谢。

【问题讨论】：

标签： css reactjs sass webpack css-loader

【解决方案1】：

如 Local scope 下的css-loader documentation 中所述，您可以将 :global 应用于您不希望加载器转换的样式：

:global (.tag_input li.active) {
  font-weight: bold;
  text-decoration: underline;
  color: red;
}

【讨论】：

【解决方案2】：

您应该使用 className 道具并设置活动状态，您将更新道具

<ReactTags className={props.active ? classes.tagInputActive : classes.tagInput}/>

【讨论】：