Ответ 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 {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'
});

Ответ 2

Когда вы загружаете пользовательский css-загрузчик в конфигурацию Webpack, обычно вам нужно активировать CSS-модули с ?modules, включенными в запросе, поэтому вы активируете область :local по умолчанию. Это означает, что если вы хотите объявить .selector { ... } без преобразования, вы должны использовать его в :global(.selector) {}.

Поскольку вы используете загрузчик SASS, если вы хотите включить css из поставщика, его можно импортировать с помощью @import "~react-select". Проблема, как вы сказали, заключается в том, что это приведет к тому, что все селекторы из библиотеки будут преобразованы в локальную. Чтобы этого избежать, вы можете заключить импорт в :global так же, как и с селектором типа: :global { @import "~react-select"; }

Ответ 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';

Другими словами, все будет следовать настройкам вашего конфигурационного файла для webpack для css-loader, за исключением случаев, когда вы специально импортируете его с помощью разных загрузчиков (the! x! y)

Если у вас много исключений/глобалов, тогда принятое решение может быть лучше.