首页 文章

Webpack将css中的node_module导入为全局

提问于
浏览 次
1

我曾经直接在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内容为 global css and preserve the original class name （不应用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;
webpack webpack-style-loader css-modules css-loader

1 回答

  • 0

    这是我的解决方案

    我创建了一个 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'
...
    回复于

相关问题