импортированные стили не загружаются с помощью ExtractTextPlugin

мои стили не загружаются, когда я использую следующий синтаксис

import '../styles/some-component.scss';

но они будут загружаться, когда я использую такие модули (что имеет смысл, поскольку у меня для параметра css-loader modules установлено значение true):

import '../styles/some-component.scss';
const className = styles.panel;
// etc...

чтобы расширить вышеизложенное, я загружаю стили в компоненты React следующим образом:

import React from 'react';
import '../styles/loading-overlay.scss';

const LoadingOverlay = ({ loadingMessage}) => {
    return (<div className="loading-effect-overlay">
            <Blah loadingMessage={loadingMessage} />
        </div>
    );
};

export default LoadingOverlay;

Я знаю, что могу легко встроить стили через import '!style-loader!css-loader!sass-loader!../styles/loading-overlay.scss';, но я хочу, чтобы они экспортировались в отдельный файл css компонентов.

Я использую Webpack 2.2.1 и extract-text-webpack-plugin 2.0.0-rc.3.

Вот соответствующие (AFAIK) части конфигурации Webpack:

const extractScss = new ExtractTextPlugin({
    filename: '../css/components.css',
    allChunks: true,
    disable: enableDevServer
});

// etc...

config.module.rules.unshift({
    test: /\.scss$/,
    loader: extractScss.extract({
        fallback: 'style-loader',
        use: isProd ?
            [
                {
                    loader: 'css-loader',
                    options: {
                        localIdentName: '[name]-[local]-[hash:base64:5]',
                        modules: true,
                        // TODO: should we be using the minimize option here?
                        // minimize: true,
                        importLoaders: 1
                    }
                },
                'postcss-loader',
                'sass-loader'
            ] :
            [
                {
                    loader: 'css-loader',
                    options: {
                        localIdentName: '[name]-[local]-[hash:base64:5]',
                        modules: true,
                        sourceMap: true,
                        importLoaders: 1
                    }
                },
                'postcss-loader',
                'sass-loader?sourceMap'
            ]
    })
});

есть идеи, почему это может не работать? любую дополнительную информацию, которую мне нужно предоставить?


sass webpack-2 commonschunkplugin extract-text-plugin extracttextwebpackplugin
person Jordan    schedule 17.02.2017    source источник
comment
Вы имеете в виду, что для них не создается внешняя таблица стилей? куда вы импортируете таблицы стилей?   -  person thesublimeobject    schedule 17.02.2017
comment
да, стили не генерируются в выходном файле component.css — я импортирую таблицы стилей в компоненты React (я приведу пример выше)   -  person Jordan    schedule 17.02.2017
comment
Я предполагаю, что у вас также есть плагин, зарегистрированный в вашем файле конфигурации?   -  person thesublimeobject    schedule 18.02.2017
comment
да, и это работает для всего остального, кроме случаев, когда я использую этот особый стиль импорта (который в основном используется только для общих компонентов)   -  person Jordan    schedule 18.02.2017

Ответы (1)


arrow_upward
0
arrow_downward

Поскольку вы используете интеграцию CSS-модулей с React, все ваши классы CSS будут преобразованы в следующем формате: [name]-[local]-[hash:base64:5], где name — это имя компонента.

Попробуйте импортировать такие стили:

import React from 'react';
import styles from './LoadingOverlay.module.css';

const LoadingOverlay = ({ loadingMessage}) => {
    return (<div className={styles.overlay}>
            <Blah loadingMessage={loadingMessage} />
        </div>
    );
};

export default LoadingOverlay;

И создайте класс .overlay внутри вашего файла LoadingOverlay.module.css. Обратите внимание, что CSS-модули — это метод интеграции CSS с модулями.

Если вы хотите объединить два разных метода, таких как CSS-модули и SASS, вы должны добавить два разных правила в webpack, по одному для каждого. Что-то вроде этого (ключ включает правило, которое позволяет вам использовать разные правила для разных подпапок). Допустим, у вас есть обычные css-файлы SASS в app/stylesheets и ваши css-модули в app/src.

{
            test: /\.scss$/i,
            include: resolve(__dirname, './../app/stylesheets'),
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 1,
                            minimize: true
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            })
        },
        {
            test: /\.css$/i,
            include: resolve(__dirname, './../app/src'),
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 1,
                            modules: true,
                            camelCase: true,
                            localIdentName: '[name]_[local]_[hash:base64:5]',
                            minimize: true
                        },
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            })
        }

Надеюсь, это поможет.

person José Quinto Zamora    schedule 18.02.2017
comment
Спасибо за подробный ответ. Я знаю, что такое модули CSS. У нас много устаревшего кода, поэтому я использую SASS. Тем не менее я не знаю, почему я не могу использовать этот синтаксис вместе с модулями CSS. - person Jordan; 18.02.2017