1

当我使用以下语法时，我的样式没有加载

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

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

4

1 回答 1

0

当您使用 CSS-Modules 与 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'
                    }
                ]
            })
        }

希望有帮助。

于 2017-02-18T10:02:59.453 回答