CODEWITHSUNDEEP
webpack-3extracttextwebpackplugin
Sachindra
Sachindra

Reputation: 7029

Issue using extract-text-webpack-plugin

I am trying to use the Extract Text Webpack Plugin, but I have not been able to generate a new css file for the compiled sass files.

webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");


module.exports = {
    entry   :   './src/app.js',
    output  :   {
        filename    :   './dist/bundle.js'
    },
    module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader','sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
        filename : 'app.bundle.css'
    }),
  ]
}

package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  }
}

app.js:

var css = require('../css/app.scss');

console.log("This is a test Hi from webpack !!!");

Upvotes: 2

Views: 718

Answers (1)

Kasiriveni
Kasiriveni

Reputation: 5941

  • I able to generate a new css file for the compiled sass files
  • please go through repo for your reference working example

your configuration looks good only ,my be you miss the path or forgot load css file in index.html or may be you did not create any scss files

live example

Upvotes: 1

Related Questions