Webpack 将 CSS 中的 node_module 导入为全局

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 不起作用，它只是打印“: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 加载器配置为不使用模块：

...
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'
...