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

前端之家收集整理的这篇文章主要介绍了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'
});

猜你在找的CSS相关文章