Webpack2配置（相关部分）

Question

我正在一个新的React项目中使用CSS模块（通过Webpack css loader），尽管它工作得很好，但我无法让React Select的SCSS工作。我想这是因为它试图创建local classNames，而react-select中的JS并不知道。有没有办法导入整个.scss文件，但是全局范围而不是本地范围？

Answer 1

我通常会定义两个这样的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 {文件名} .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'
});

Answer 2

当您在Webpack配置中使用css加载器时，通常您希望激活查询字符串中启用了Error Domain=com.facebook.Facebook.platform Code=103 "(null)" UserInfo={error_message=Error parsing link, error_code=103, app_id=870185466371832}的CSS模块，因此默认情况下您将激活?modules范围。这意味着，如果您要声明:local而不进行转换，则必须将其用于.selector { ... }。

由于您使用的是SASS加载程序，如果您想要包含供应商的css，可以使用:global(.selector) {}导入它。你说的问题是，这将使库中的所有选择器转换为本地。为避免这种情况，您可以将导入封装在@import "~react-select"中，就像使用选择器一样：:global

Answer 3

另一种适用于我的解决方案（从刮擦github问题），如下：

Webpack2配置（相关部分）

    {
        test: /\.css$/,
        use: [{
            loader: 'style-loader',
        }, {
            loader: 'css-loader',
            options: {
                modules: true,
            },
        }, {
            loader: 'postcss-loader',
        }],
    }

moduleX.js

以slick-carousel为例。

// Import the libraries css without the module gear being applied
//
import '!style-loader!css-loader!slick-carousel/slick/slick.css';

// Import my applications css. `styles` will be the typical 
// `slide_foo_xeh54` style set of module exports 
// (depending how you have your css-loader 
// configured
//
import styles from './Slides.css';

换句话说，除了用不同的加载器（！x！y）专门导入它之外，一切都将遵循你的webpack配置文件为css-loader配置的选项

如果你有很多异常/全局变量，那么接受的解决方案可能会更好。

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

3 个答案:

Webpack2配置（相关部分）

moduleX.js