文章/答案/技术大牛

发布

社区首页 >问答首页 >Webpack不能修复CSS覆盖问题，并在<style>中捆绑<head>元素

问Webpack不能修复CSS覆盖问题，并在<style>中捆绑<head>元素
EN

Stack Overflow用户

提问于 2018-03-15 19:56:57

回答 1查看 2.8K关注 0票数 0

在我的应用程序中，假设我有两个JS页面A和B，每个页面导入一个不同的样式表(import '../style/<A or B.css>')。

这两个样式表具有相同的类名，但属性不同。

我运行yarn run dev ==> dev: webpack-dev-server --inline --hot ==> webpack -p

这就是我的html <head>的样子。

https://imgur.com/a/1JVb5

页面A首先加载样式表，然后加载页面B css样式

当我转到B页时，css是正确的

当我进入A页时，css是混合的，一些类样式被页面B.css所覆盖。

我的项目结构就像

public/
 bundle.js
 index.html
src/
 components/
 pages/
 style/
 App.js
 index.js
 package.json
 webpack.config.js

我的webpack.config.js是

const path = require('path');

var config = {
    entry: path.resolve(__dirname, 'src', 'index.js'),
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'src'),
        publicPath: path.resolve(__dirname, 'public')
    },
    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
                { loader: 'babel-loader',
                options: { presets: ['react','env'] } }
            ]
        },
        {
            test: /\.css$/,
            use: [
                { loader: "style-loader?singleton", 
                  options: 
                  { singleton: true } 
                },
                { loader: "css-loader" }
            ]
        }
        ]
    }
};
module.exports = config;

我希望Webpack合并多个元素并修复css覆盖问题。

在Webpack里，我试过style-loader?singleton和{ singleton: true }，但是没有用。

编辑1:查看摘录-文本-webpack-插件

编辑2:

import movieStyle from '../style/MovieDetail.css' 
... 
return (
<div id="CellDetail_right" className={ movieStyle['cell-detail-right'] }>...</div>
)

好的，我添加了options: { modules: true }，但是它不起作用。我的classNames是连字符的，在编译浏览器之后，会呈现没有任何样式或类的组件。浏览器上的Div看起来像<div id="CellDetail_right">...<div>

css

webpack

webpack-style-loader

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-03-15 20:32:28

一种解决方案是启用本地作用域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-演示项目，其中包括处理场景所需的信任。检查webpack构型

阅读有关css-加载器选项的更多信息

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49308182

复制

相似问题

问Webpack不能修复CSS覆盖问题，并在<style>中捆绑<head>元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Webpack不能修复CSS覆盖问题，并在<style>中捆绑<head>元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Webpack不能修复CSS覆盖问题，并在<style>中捆绑<head>元素
EN