18

我在一个新的 React 项目中使用 CSS 模块(通过 Webpack css 加载器),即使它工作得很好,我也无法让React Select的 SCSS工作。我想这是因为它试图创建localJSreact-select不知道的类名。有没有办法导入整个.scss文件,但范围是全局而不是本地?

4

3 回答 3

30

我通常这样定义两个 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 Modules vs {filename}.css === Global 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'
});
于 2016-05-09T23:57:04.680 回答
16

当您在 Webpack 配置中使用 css 加载器时,通常您希望激活?modules在查询字符串中启用的 CSS 模块,因此您将:local默认激活范围。这意味着如果你想在.selector { ... }不被转换的情况下声明,你必须把它用成一个:global(.selector) {}.

由于您使用的是 SASS 加载程序,如果您想包含来自供应商的 css,您可以使用@import "~react-select". 如您所说,问题在于这将使库中的所有选择器都转换为本地选择器。为避免这种情况,您可以:global像使用选择器一样将导入包含在内,例如::global { @import "~react-select"; }

于 2016-02-15T19:25:28.623 回答
5

对我有用的替代解决方案(从 gi​​thub 问题中抓取)如下:

Webpack2 配置(相关部分)

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

模块X.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';

换句话说,一切都将遵循您为 css-loader 配置的 webpack 配置文件选项,除非您使用不同的加载器(!x!y)专门导入它

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

于 2017-01-20T15:47:53.160 回答