DWQA QuestionsCategory: ProgramWebpack4 introduces stylus and CSS, and the.Stylus file is not extracted after NPM run build
Blue with black asked 2 months ago

Webpack4 introduces stylus and CSS, but the.Stylus file is not extracted after build
index.js

import './index. After packaging, styled 'is not extracted into app.[hash:8].css
import './main. css' // main. CSS normal

webpack.config.prod.js

module.exports = merge(webpackCommon, {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        'css-loader'
                    ]
                })
            },
            {
                test: /\.styl/,
                use: ExtractPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true 
                            },
                        },
                        'stylus-loader'
                    ]
                })
            }
        ]
    },
    plugins: [
        //Slightly
        new ExtractPlugin('app.[hash:8].css')
    ]
  }

But webpack.config.dev.js, when developing the environment, the style of.Style is normally inserted into the head of index.html

module.exports = merge(webpackCommon, {
    //Slightly
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.styl$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                    loader: 'postcss-loader',
                    options: {
                        //Here, postcss compiles directly with the tree compiled by stylus to improve efficiency
                        sourceMap: true,
                        }
                    },
                    'stylus-loader']
            }
        ]
    },
    plugins: [
       //Slightly 
    ]
})

index.styl
clipboard.png
main.css
clipboard.png
NPM run build generates a separate file app.hash.css
clipboard.png
npm run dev
clipboard.png,Thank you ~ is the problem solved?
It may be an extraction plug-inExtractPluginVersion problem.

1 Answers
Ruochuan answered 2 months ago

Thank you ~ is the problem solved?
It may be an extraction plug-inExtractPluginVersion problem.

Blue with black replied 2 months ago

“Extract text webpack plugin”: “^4.0.0-beta.0” is this version