Câu hỏi Sử dụng các module css với Extract Text Plugin


Webpack 2 build không hoạt động như mong đợi ở chế độ sản xuất bằng cách sử dụng tùy chọn css modules trong css-loader với extract-text-webpack-plugin.

các lớp được tạo đúng được tạo trên các phần tử html, ngụ ý rằng trình nạp css đang hoạt động như dự định, nhưng tệp css được trích xuất từ ​​trình giải nén văn bản-webpack-plugin thiếu các định danh css.

Tôi đang sử dụng một phương pháp để thực hiện cả hai css và css mô-đun toàn cầu với nhau như được thảo luận ở đây: https://github.com/css-modules/css-modules/pull/65 và đây: https://github.com/kitze/custom-react-scripts/issues/29.

Tôi đang sử dụng các trình kiểm tra bộ tải khác nhau cho các tệp kết thúc bằng .css và tệp kết thúc bằng .cssm.css cho biết rằng chúng sẽ được tải bằng mô-đun.

phần liên quan của cấu hình:

const extractTextPlugin = new ExtractTextPlugin({filename: '[name].[id].[contenthash].css', allChunks: true});

return {
    module: {
        rules: [
            {
                test: /\.cssm.(css|less)$/,
                loader: extractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: [
                        {
                            loader: 'css-loader',
                            query: {
                                importLoaders: 1,
                                modules: true,
                                localIdentName: '[name]_[local]_[hash:base64:5]'
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            query: {
                                ident: 'postcss',
                                plugins: function() {
                                    return [
                                            require('autoprefixer')
                                    ];
                                }
                            }
                        },
                        {
                            loader: 'less-loader'
                        }
                    ]
                })
            },
            {
                test: /\.(css|less)$/,
                include: paths,
                loader: extractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: [
                        {
                            loader: 'css-loader',
                            query: {
                                importLoaders: 1
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            query: {
                                ident: 'postcss',
                                plugins: function() {
                                    return [
                                            require('autoprefixer')
                                    ];
                                }
                            }
                        },
                        {
                            loader: 'less-loader'
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        extractTextPlugin
    ]
};

Tôi đã thử các giải pháp được đề xuất như sử dụng webpack 1 kiểu viết trình tải, nhưng điều đó không giúp ích gì.

Tôi đang sử dụng phiên bản webpack: 2.6.1 và extract-text-webpack-plugin: 2.1.2.

Tôi cũng đã thử các phiên bản khác, điều này dường như không giúp được gì.

các tệp css toàn cầu của tôi hoạt động tốt, chỉ các tệp .cssm.css được nhập bị bỏ qua khi được sử dụng với trình trích xuất-văn bản-webpack-plugin.

Làm thế nào để khắc phục vấn đề của các tập tin mô-đun css không được trích xuất đúng với css toàn cầu khác?


9
2017-07-09 15:46


gốc


Nếu tôi có thể upvote bạn một lần nữa, tôi sẽ. Cảm ơn bạn đã theo dõi câu trả lời của bạn. - The Dembinski


Các câu trả lời:


Rõ ràng thiết lập của tôi là tốt. Vấn đề là tôi không bao gồm tất cả các tập tin kiểu (css / less) của tôi trong cấu hình webpack "entry". Cấu hình thông qua pha xây dựng, nhưng không xử lý các tệp .cssm.less mới mà tôi đã thêm vào trong nỗ lực của tôi để sử dụng các mô-đun css cùng với css toàn cục thông thường.

Bây giờ mọi thứ đều hoạt động! Để tham khảo trong tương lai, tôi sẽ bao gồm cấu hình được cập nhật của tôi để sử dụng các mô-đun css với css toàn cầu (để sản xuất và phát triển). Rõ ràng trong các phiên bản mới hơn của webpack và extractTextPlugin, cú pháp chính xác ("sử dụng" vs "bộ tải", "tùy chọn" so với "truy vấn" vv ...) không còn quan trọng nữa và hoạt động theo cả hai cách.

Đối với sản xuất, tôi thêm tiền tố cssm vào tất cả các tên lớp của mô-đun css của tôi trong thuộc tính "localIdentName" để sau này tôi có thể sử dụng PurifyCSSPlugin và danh sách trắng mỗi lớp chứa cssm:

exports.setupSeparateStyles = function(paths, cssModulesPaths) {
    const extractTextPlugin = new ExtractTextPlugin({
            filename: '[name].[contenthash].css', 
            allChunks: true
        });

    return {
        module: {
            rules: [
                {
                    test: /\.(css|less)$/,
                    include: paths,
                    exclude: /\.cssm\.(css|less)$/,
                    use: extractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: [
                            {
                                loader: 'css-loader',
                                options: {
                                    importLoaders: 1
                                }
                            },
                            'postcss-loader',
                            'less-loader'
                        ]
                    })
                },
                {
                    test: /\.(css|less)$/,
                    include: cssModulesPaths,
                    use: extractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: [
                            {
                                loader: 'css-loader',
                                options: {
                                    importLoaders: 1,
                                    modules: true,
                                    localIdentName: 'cssm-[name]_[local]_[hash:base64:5]',
                                }
                            },
                            'postcss-loader',
                            'less-loader'
                        ]
                    })
                }
            ]
        },
        plugins: [
            new webpack.LoaderOptionsPlugin({
                options: {
                    postcss: [
                        require('autoprefixer')
                    ]
                }
            }),
            extractTextPlugin
        ]
    };
};

để phát triển nó đơn giản hơn rất nhiều:

exports.setupInlineStyles = function (paths, cssModulesPaths) {
    return {
        module: {
            rules: [
                {
                    test: /\.(css|less)$/,
                    include: paths,
                    exclude: /\.cssm\.(css|less)$/,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1
                            }
                        },
                        'postcss-loader',
                        'less-loader'
                    ]
                },
                {
                    test: /\.(css|less)$/,
                    include: cssModulesPaths,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                modules: true,
                                localIdentName: '[name]_[local]_[hash:base64:5]'
                            }
                        },
                        'postcss-loader',
                        'less-loader'
                    ]
                }
            ]
        },
        plugins: [
            new webpack.LoaderOptionsPlugin({
                options: {
                    postcss: [
                        require('autoprefixer')
                    ]
                }
            })
        ]
    };
};

5
2017-07-17 08:55



Tại sao mọi người sử dụng localIdentName: '[name]_[local]_[hash:base64:5]', tại sao không ai không sử dụng số băm nhỏ hơn năm, ý tôi là localIdentName: '[name]_[local]_[hash:base64:3]', khi tôi sử dụng ít hơn năm một số lớp băm có cùng tên và điều này xảy ra làm cho tất cả các kiểu css xấu. - AngelHotxxx
@AmerllicA: Khi xử lý tham số "localIdentName", hàm interpolateName được gọi từ thư viện webpack / loader-utils. Có thể tìm thấy các tham số hàm interpolateName tại đây: [link]github.com/webpack/loader-utils. - deckele
@AmerllicA: Để giải quyết câu hỏi của bạn: một số băm đầy đủ được tạo theo "digestType" đã chọn (base64). Sau đó, nếu bạn chỉ định băm "độ dài" (5 như được khuyến nghị trong phần mềm giải nén css-loader - liên kết hoặc 3 trong trường hợp của bạn), một chuỗi con của số băm ban đầu được trả về với độ dài được chỉ định. Bởi vì con số này bị cắt giảm, nếu bạn chỉ sử dụng 3 ký tự, có khả năng là băm được tạo sẽ không phải là mã băm duy nhất và do đó gây ra các vấn đề css. - deckele
Tôi tạo một cách mới để sử dụng RandomName, không phải băm, tên ngẫu nhiên, nó hoạt động tuyệt vời và tôi có thể tạo nhiều tên khác nhau. đọc câu hỏi này và xin vui lòng bỏ phiếu, cảm ơn. stackoverflow.com/questions/47580113 - AngelHotxxx