Question

在我的应用程序中，假设我有两个JS页面A和B，每个页面导入一个不同的样式表（ import'../ style/<A或B.css＆gt;'）。
＆＃xA;两种样式表都有相同的类名，但属性不同。

＆＃xA;＆＃xA;

我运行 yarn run dev ==＆gt; dev：webpack-dev-server --inline --hot ==＆gt; webpack -p

＆＃xA;＆＃xA;

这就是我的html ＆lt; head＆gt; 看起来像＆＃xA; https://imgur.com/a/1JVb5
＆＃xA;页面首先加载样式表，然后在

＆＃xA;＆＃xA;

之后加载页面B css样式当我转到页面B时，css是正确的＆＃xA;当我转到页面A时，css混淆了一些类样式被页面B.css覆盖。

＆＃xA;＆＃xA;

我的项目结构就像

＆＃xA;＆＃xA;

 <代码>公共/＆＃XA; bundle.js＆＃XA;的index.html＆＃XA; SRC /＆＃XA;组件/＆＃XA;页/＆＃XA;风格/＆＃XA; App.js＆＃XA; index.js＆＃XA;的package.json＆＃XA; webpack.config.js＆＃xA;

＆＃xA;＆＃xA;

我的webpack.config.js是

＆＃xA;＆＃xA;

 < code> const path = require（'path'）;＆＃xA;＆＃xA; var config = {＆＃xA; entry：path.resolve（__ dirname，'src'，'index.js'），＆＃xA;输出：{＆＃xA; path：path.resolve（__ dirname，'public'），＆＃xA; filename：'bundle.js'＆＃xA; }，＆＃XA; devServer：{＆＃xA; contentBase：path.resolve（__ dirname，'src'），＆＃xA; publicPath：path.resolve（__ dirname，'public'）＆＃xA; }，＆＃XA;模块：{＆＃xA;规则：[＆＃xA; {＆＃XA; test：/\。js $ /，＆＃xA; exclude：/（node_modules | bower_components）/，＆＃xA;使用：[＆＃xA; {loader：'babel-loader'，＆＃xA;选项：{presets：['react'，'env']}}＆＃xA; ]＆＃XA; }，＆＃XA; {＆＃XA;测试：/\。css $ /，＆＃xA;使用：[＆＃xA; {loader：“style-loader？singleton”，＆＃xA;选项：＆＃xA; {singleton：true}＆＃xA; }，＆＃XA; {loader：“css-loader”}＆＃xA; ]＆＃XA; }＆＃XA; ]＆＃XA; }＆＃xA;};＆＃xA; module.exports = config;＆＃xA;

＆＃xA;＆＃xA;

我希望Webpack合并多个元素并修复css覆盖问题
＆＃xA;在Webpack中，我尝试了 style-loader？singleton 和 {singleton：true} ，但它没有用。

＆＃xA;＆＃xA;

编辑1：查看extract-text-webpack-plugin

＆＃xA;＆＃xA;

< strong>编辑2：

＆＃xA;＆＃xA;

 从'../style/MovieDetail.css'＆＃xA; ...＆＃xA导入movieStyle ; return（＆＃xA;＆lt; div id =“CellDetail_right”className = {movieStyle ['cell-detail-right']}＆gt; ...＆lt; / div＆gt;＆＃xA;）＆＃xA;

＆＃xA;＆＃xA; 好的，我添加了选项：{modules：true} ，但它没有用。我的classNames被连字符，并且在编译浏览器之后呈现没有任何样式或类的组件。 ＆＃xA; Div浏览器看起来像＆lt; div id =“CellDetail_right”＆gt; ...＆lt; div＆gt;  ＆＃xA;

Answer 1

一种解决方案是启用本地作用域css以避免样式出血/覆盖。更新您的css-loader选项以包含modules: true

{
    test: /\.css$/,
    use: [
        {
            loader: "style-loader", 
            options: { singleton: true }
        },
        {
            loader: "css-loader",
            options: {
                modules: true,
                camelCase: 'dashes',
                localIdentName: '[path][name]__[local]'
            }
        }
    ]
}

然后，在您的组件中使用：

import styles from '../style/MovieDetail.css';

function MyComponent() {
    return (
        <div className={styles.container}>
            <div className={styles.cellDetailRight}>Some Content</div>
        </div>
    );
}

这确保尽管您在其他css文件中定义了更多.container个规则，但此特定规则变为._-path-to-component__container。

在选项中使用camelCase: 'dashes'可转换带连字符的规则。

类名中的破折号将被骆驼化

您还可以查看我的webpack-demo项目，其中包含用于处理您的方案的配置。查看webpack configurations

详细了解css-loader options

Webpack无法修复CSS覆盖问题并在<head>中捆绑<style>元素

1 个答案: