CODEWITHSUNDEEP
cssnpmwebpackbuild
aisha umar
aisha umar

Reputation: 1

when running npm run webpack for build for production mode i cant get a seperate file for css to be created in my dist folder. its not showing up

here is the code for my webpackconfig file.

const currentTask=process.env.nmp_lifecycle_event

const path = require("path")

const MiniCssExtractPlugin = require ('mini-css-extract-plugin')

const config= { entry:'./app/app.js',

output:{
    filename:'myBundle.[hash].js',
    path: path.resolve(__dirname,'dist')
},
plugins:[],
mode:'development',
devServer:{
    port:8080,
    static:path.resolve(__dirname, 'dist'),
    hot:true
},
module:{
    rules:[
    {
       test:/\.scss$/,
       use:['style-loader', 'css-loader', 'sass-loader']

    },
    {
    
        test:/\.js$/,
        exclude:/(node_modules|bower_components)/,
        use:{
            loader:"babel-loader",
            options:{
                presets:['@babel/preset-env', '@babel/preset-react']
            }
        }
    }
    ]
}
}

if(currentTask == "build"){
    config.mode = "production"
    config.module.rules[0].use[0]=MiniCssExtractPlugin.loader
    config.plugins.push(new MiniCssExtractPlugin({filename:'main.[hash].css'}))
}

module.exports = config

Upvotes: 0

Views: 839

Answers (1)

Amir
Amir

Reputation: 1047

I have tried your code and it works fine, you only have a typo in first line (wrong spelling for npm):

const currentTask=process.env.nmp_lifecycle_event

should be:

const currentTask=process.env.npm_lifecycle_event

Also, make sure that you have imported your .scss files somewhere in your javascript and that you are building your app with npm run build.

Upvotes: 0

Related Questions