Question

我以前用javascript直接导入 import '!style-loader!css-loader!../../node_modules/react-soundplayer/styles/buttons.css'但它太丑了，我不喜欢它

在我的react组件中，我想指定一个css-module import style from './style/App.css'，App.css，我有

:global (@import '~react-soundplayer/styles/buttons.css');

：全局不起作用，只打印“：global（@import'~basscss / css / basscss.css'）;”在webpack之后的HTML头部的样式元素中。

我需要一种方法将我的.css中的node_modules内容导入为全局css并保留原始类名（不应用css-loader localIdentName: '[path][name]__[local]'）

我的webpack.config是

const path = require('path');

const package = require('./package.json');

const PATHS = {
    src: path.join(__dirname, './src'),
    public: path.join(__dirname, './public')
};

var config = {
    entry: { 
        app: [ 'babel-polyfill', path.resolve(PATHS.src, 'index.js') ] 
    },
    output: {
        path: path.resolve(PATHS.public),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devServer: {
        contentBase: path.resolve(PATHS.public),
        port: 3000,
        historyApiFallback: true,
        proxy: {
            '/api/**': {
            target: 'http://localhost:5000',
            changeOrigin: true
            }
        }
    },
    module: {
        rules: [
        {
            test: /\.js$/,
            use: [
                { 
                    loader: 'babel-loader'
                }
            ],
            exclude: /(node_modules|bower_components)/
        },
        {
            test: /\.css$/,
            use: [
                {
                    loader: 'style-loader',
                    options: { singleton: true }
                },
                {
                    loader: 'css-loader',
                    options: { 
                        modules: true,
                        camelCase: 'dashes',
                        localIdentName: '[path][name]__[local]' 
                    }
                }
            ]
        }
        ]
    }
};
module.exports = config;

Answer 1

这是我的解决方案

我创建了一个node_modules.css，其中包含来自node_modules和globals的常规css：

@import '~basscss/css/basscss.css';
@import '~react-soundplayer/styles/buttons.css';
@import '~react-soundplayer/styles/progress.css';
@import '~react-soundplayer/styles/volume.css';

/* OVERRIDE NODE_MODULES (:global() and !important not required) */
/* basscss */
svg {
    fill: var(--description-color);
    stroke: var(--description-color);
}

.red {
  color: var(--description-color);
  margin-bottom: 8px;
}

.p2 {
  text-align: left;
}

/* react-soundplayer */
.sb-soundplayer-progress-container {
  background-color: var(--title-color);
}

.sb-soundplayer-progress-inner {
  background-color: var(--description-color);
}

.sb-soundplayer-volume-range::-webkit-slider-runnable-track {
background: var(--title-color);
}

.sb-soundplayer-volume-range::-webkit-slider-thumb {
  background: var(--description-color);
}

在webpack.config.js中，我添加了另一个模块规则，包括来自node_modules的css，通过样式和css加载器，除了css loader配置为不使用模块：

...
module: {
    rules: [
        {   
            test: /\.css$/,
            use: [
                {
                    loader: 'style-loader',
                    options: { singleton: true }
                },
                {
                    loader: 'css-loader',
                    options: { 
                        modules: false
                    }
                }
            ],
            include: [
                /(node_modules|bower_components)/, 
                path.resolve(PATHS.src, 'style/node_modules.css')
            ]
        },
        {
            test: /\.css$/,
            use: [
                {
                    loader: 'style-loader',
                    options: { singleton: true }
                },
                {
                    loader: 'css-loader',
                    options: { 
                        modules: true,
                        camelCase: 'dashes',
                        localIdentName: '[path][name]__[local]' 
                    }
                }
            ],
            exclude: [
                /(node_modules|bower_components)/, 
                path.resolve(PATHS.src, 'style/node_modules.css')
            ]
        }
    ]
}
...

将其包含在其他css文件中不起作用，因为webpack将其预处理为css模块

/* css */
@import url('./node_modules.css');
...
/* other css classes*/

仅在直接导入javascript

时才有效

// javascript    
import './style/node_modules.css'
...

Webpack将css中的node_module导入为全局

1 个答案: