Question

我从这里开始使用webpack配置：

https://github.com/erikras/react-redux-universal-hot-example

对于生产版本，我做了建议的更改，现在是较少的装载机，scss和css看起来像这样

      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader')},
      { test: /\.less$/, loader: 'style!css?importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
      { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') }

我正在使用require加载样式表

需要（＆＃39; ../ pathToSCSSSTylSheet＆＃39）

CSS加载得很好，但scss类在webpack生成的最终样式表中重命名，因此类永远不会被应用。如何停止重命名这些scss类？

我已经&localIdentName=[local]___[hash:base64:5]并尝试保留它，但无论如何都要重命名这些类

Answer 1

删除modules选项，启用CSS模块。

有关详细信息，请参阅https://github.com/webpack/css-loader#user-content-css-modules。

如果您不想删除modules选项，可以像this一样使用：

import styles from './app.scss';
export default class InfoBar extends Component{
  render(){
    const styles = require('./InfoBar.scss');
    return (
      <span className={styles.time}>10:00</span>
   );
 }
}

Answer 2

您可以导入这样的样式

:global { 
  @import 'scss_path';
}

它会将样式导入为全局样式，因此您将获得scss类而无需重命名。

webpack正在重命名我的scss类

2 个答案: