Question

我有一个webpack配置（基于React Universally）。我看到的一件事是导入的scss文件上的类名转换为哈希。

我尝试将样式导入为对象并按名称引用样式类，但它们只是消失了。没有在其他项目中看到这种行为，也不确定我做错了什么。

>>> from iteration_utilities import grouper
>>> mylist = [0.01, 0.09, 0.04, 0.16]
>>> [sum(group) for group in grouper(mylist, 2)]  # or "list(map(sum, grouper(mylist, 2)))"
[0.09999999999999999, 0.2]

的WebPack

import './styles/scss/app.scss';

function App() {
    return (
      <Provider store={ store }>
          <IntlProvider>
              <MuiThemeProvider>
                  <Switch>
                      <Route exact path="/" component={Home} />
                      <Route component={Error404} />
                  </Switch>
              </MuiThemeProvider>
          </IntlProvider>
      </Provider>
    )
}


import styles from './portfolio.scss';

[...]
return (
<div className={cx(styles.phoneAni, {active: imageOpen})}>
    <img src="img/iphone_s01_1.png"/>
    <img src="img/iphone_s01_0.png"/>
    <img src="img/iphone_s02_2.png"/>
</div>
);

Answer 1

由于您正在使用css modules.，因此类名将转换为哈希值为了禁用它，您必须在css-loader选项对象中设置modules: false,。或者您仍然可以使用css模块，但是您需要翻译html中的类以使用生成的类。

Answer 2

localIdentName怎么样？
默认是_ [hash：base64：22]

webpack.config.js

test: /\.(css|sass)$/,
use: [{
  loader: "css-loader?modules",
  options: {
    modules: true,
    localIdentName: '[local]'
    //sample(if u use custom className)
    //localIdentName: '[path][name]__[local]--[hash:base64:5]'
    //localIdentName: '[local]--[hash:base64:5]'   
  }
  ...

Answer 3

现在您可以使用

{
      loader: 'css-loader',
      options: {
           modules: {
                localIdentName: '[local]__[hash:base64:5]'
           }
      }
},

更多信息https://webpack.js.org/loaders/css-loader/#object

导入的scss类名称转换为哈希

3 个答案: