Question

我正在使用3rd party react component，而我无法正确配置我的sass。此组件会创建一系列<li>个html标记，如果其中一个<li>被点击，则添加会为该项指定一个“有效”类名：<li class="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
我以某种方式让<ReactTags />使用类名：Test__active___2LBGS

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

Answer 1

如本地范围下的css-loader documentation中所述，您可以应用：global to styles，您不希望加载程序转换：

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

Answer 2

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

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

React + Sass + Webpack本地样式问题

2 个答案: