webpack – CSS模块：如何禁用文件的本地范围？

我正在使用CSS模块(通过Webpack css加载器)在一个新的React项目中,即使它的工作非常好,我无法使SCSS为 React Select工作.我想象这是因为它尝试创建本地的classNames,JS在反应选择中是不知道的.有没有办法导入整个.scss文件,但是在全局而不是本地的范围？

解决方法

我通常定义两个这样的CSS加载器：

// Global CSS
// We make the assumption that all CSS in node_modules is either
// regular 'global' css or pre-compiled.
loaders.push({
    test: /\.css$/,include: /node_modules/,loader: 'style-loader!css-loader'
});

// CSS modules
loaders.push({
    test: /\.css$/,exclude: /node_modules/,loader: 'style-loader!css-loader?modules'
});

我以前也将应用程序迁移到CSS模块,发现基于文件扩展名定义一个约定是有用的,例如{filename} .module.css === CSS模块vs {filename} .css ===全局CSS

// Global CSS
loaders.push({
    test: /\.css$/,exclude: /\.module\.css$/,loader: 'style-loader!css-loader'
});

// CSS modules
loaders.push({
    test: /\.module\.css$/,loader: 'style-loader!css-loader?modules'
});