CSS 模块:如何禁用文件的本地范围? [英] CSS Modules: How do I disable local scope for a file?

问题描述

我在一个新的 React 项目中使用 CSS 模块(通过 Webpack css 加载器)，尽管它运行良好，但我在获取 React Select 工作.我想这是因为它试图创建 local classNames，而 react-select 中的 JS 并不知道.有没有办法导入整个 .scss 文件，但在全局范围内而不是在本地范围内?

I'm using CSS Modules (through Webpack css loader) in a new React project, and even though it's working great, I'm having trouble getting the SCSS for React Select to work. I imagine this is because it tries to create local classNames, which the JS in react-select is unaware of. Is there a way to import an entire .scss file, but scoped globally instead of locally?

推荐答案

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

I generally define two CSS loaders like this:

// 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

I've also migrated an app to CSS modules in the past and found it was useful to define a convention based on file extension, e.g. {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'
});

这篇关于CSS 模块:如何禁用文件的本地范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！