Question

使用以下语法

时，我的样式未加载

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

以下是Webpack配置的相关（AFAIK）部分：

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'
            ]
    })
});

为什么这可能不起作用的任何想法？我需要提供的任何其他信息？

Answer 1

当您使用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;

在你的LoadingOverlay.module.css文件中创建.overlay类。请注意，CSS模块是一种将CSS与模块集成的技术。

如果你想结合两种不同的技术，比如CSS-Modules和SASS，你应该在webpack中添加两个不同的规则。类似的东西（关键是包含规则，允许您对不同的子文件夹使用不同的规则）。假设你有app / stylesheets下的普通SASS css文件和app / src下的css模块。

{
            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'
                    }
                ]
            })
        }

希望有所帮助。

导入的样式未加载ExtractTextPlugin

1 个答案: