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


我正在一个新的React项目中使用CSS模块(通过Webpack css loader),即使它运行良好,我也无法获得SCSS 反应选择 上班。我想这是因为它试图创造 local classNames,JS中的 react-select 没有意识到。有没有办法导入整个 .scss 文件,但全局范围而不是本地?


17
2018-02-14 22:22


起源




答案:


我通常定义两个这样的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'
});

28
2018-05-09 23:57





在Webpack配置中使用css loader时,通常需要激活CSS模块 ?modules 在查询字符串中启用,因此您将激活 :local 范围默认。这意味着如果你想申报 .selector { ... } 没有被转换,你必须使用它 :global(.selector) {} 。

由于您使用的是SASS加载程序,因此如果您想要包含供应商提供的css,可以使用它进行导入 @import "~react-select"。您所说的问题是,这将使库中的所有选择器转换为本地。为避免这种情况,您可以将导入括起来 :global 与使用选择器的方式相同: :global { @import "~react-select"; }


15
2018-02-15 19:25





为我工作的替代解决方案(从刮到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配置的选项。

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


5
2018-01-20 15:47



要完成这项工作,您需要创建一个.eslintrc文件,其中包含以下内容。 {“rules”:{“import / no-webpack-loader-syntax”:“off”}} - webmaster