ExtractTextPlugin : No css file generated, no error

[jy95]

Hello,

I start out a stackoverflow post with this issue : http://stackoverflow.com/questions/43857784/webpack-extracttextplugin-no-css-file-generated-no-error . I found out it is a issue because I got no error when I start the build.

Here is a basic copy of the post :

Here are my files (just think to change extension since github blocks upload of json and js file) :

• package.json
• webpack.config.js

My app.js :

require('admin-lte/dist/css/skins/skin-blue.min.css');
require('admin-lte/dist/css/AdminLTE.min.css');
require('jquery-confirm/dist/jquery-confirm.min.css');
require('bootstrap-table/dist/bootstrap-table.min.css');
require('bootstrap-daterangepicker/daterangepicker.css');
require('eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css');
require('admin-lte/plugins/select2/select2.min.css');
require('lobibox/dist/css/lobibox.min.css');
require('ionicons/dist/css/ionicons.min.css');
require('font-awesome/css/font-awesome.min.css');
require('admin-lte/bootstrap/css/bootstrap.min.css');

Do you see what is the reason of this issue ?

Tested env :
Node.js v6.10.3
Windows 10 1703

PS: I know I can also use ES6 import. I prefer to do the old school way :)

[michael-ciniawsky]

Could you please copy&&paste the package.json && webpack.config.js as code block? 😛

[jy95]

As you wish, I put them as file just to make people become mad with a issue of 200 lines ^^
package.json :

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --env=dev --progress --watch --content-base src/app"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.4.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "json-loader": "^0.5.4",
    "postcss-cssnext": "^2.10.0",
    "postcss-loader": "^2.0.1",
    "postcss-modules-values": "^1.2.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.17.0",
    "url-loader": "^0.5.8",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
    "admin-lte": "git://github.com/almasaeed2010/AdminLTE.git#37c8bbb01998db487382e9d62cfb398511167f3a",
    "bootstrap-daterangepicker": "git://github.com/dangrossman/bootstrap-daterangepicker.git#29bbf5a04df69fda363cedb534272ac344524e57",
    "bootstrap-table": "^1.11.2",
    "eonasdan-bootstrap-datetimepicker": "git://github.com/Eonasdan/bootstrap-datetimepicker.git#4.17.47",
    "font-awesome": "^4.7.0",
    "ionicons": "^3.0.0",
    "jquery": "^3.2.1",
    "jquery-confirm": "git://github.com/craftpip/jquery-confirm.git",
    "lobibox": "git://github.com/arboshiki/lobibox.git",
    "lodash": "^4.17.4",
    "moment-timezone": "^0.5.13",
    "parsleyjs": "^2.7.1",
    "push.js": "0.0.13",
    "socket.io-client": "^1.7.4",
    "tableexport.jquery.plugin": "git://github.com/hhurz/tableExport.jquery.plugin.git"
  }
}

webpack.config.js :

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const postcssPlugins = [
  require('postcss-cssnext')(),
  require('postcss-modules-values')
];

const scssLoader = [
  { loader: 'style-loader' },
  { loader: 'css-loader' },
  { loader: 'sass-loader' }
];

const postcssLoader = [
  { loader: 'style-loader' },
  { loader: 'css-loader', options: { modules: true } },
  { loader: 'postcss-loader', options: { plugins: () => [...postcssPlugins] } }
];

// you'll need to npm install the following: [raw-loader, html-minifier-loader, json-loader, css-loader,style-loader, url-loader, file-loader ]
// in your index.html you should have two script tags, one for app.js(or bundle.js) and vendor.js
// no need for babelify with webpack. just, npm install --save-dev babel-cli babel-preset-es2016
// in .babelrc file change the preset of 2015 to ["es2016"]
module.exports = {
  entry: {
    app: './app.js',
    // if any on these are just for css remove them from here and require(with absolute path) them from app.js
    vendor: [
      'babel-polyfill',
      'admin-lte',
	  'admin-lte/bootstrap/js/bootstrap.min.js',
	  'lobibox/dist/js/notifications.min.js',
	  'admin-lte/plugins/fastclick/fastclick.js',
	  'moment',
	  'moment/locale/fr.js',
      'moment-timezone',
      'eonasdan-bootstrap-datetimepicker',
      'bootstrap-table',
	  'bootstrap-table/dist/locale/bootstrap-table-fr-BE.min.js',
      'parsleyjs',
	  'parsleyjs/dist/i18n/fr.js',
      'bootstrap-daterangepicker',
      'socket.io-client',
      'jquery-confirm',
      'push.js',
      'lodash',
	  'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js',
      'tableexport.jquery.plugin'
    ]
  },
  //devtool: 'eval', // for test in the browser
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')//,
    //pathinfo: true
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: 'babel-loader',
      exclude: /node_modules/
    }, {
      test: /\.html$/,
      use: ['raw-loader', 'html-minifier-loader'],
      exclude: /node_modules/
    }, {
      test: /\.json$/,
      use: 'json-loader',
      exclude: /node_modules/
    }, {
      test: /\.(scss|sass)$/,
	  loader: ExtractTextPlugin.extract(scssLoader),
      include: [__dirname]
    },{ 
	  test: /\.css$/,
      loader: postcssLoader,
      include: [__dirname]
    }, {
      test: /\.(jpg|png|gif)$/,
      use: 'file-loader'
    }, {
	  test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
      loader: 'file-loader?name=fonts/[name].[ext]'
    }],
  },
  plugins: [
	new ExtractTextPlugin({
		filename: 'app.bundle.css',
		allChunks: true
	}),
	new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
    })
  ],
};

[michael-ciniawsky]

"postcss-loader": "^2.0.1",

Please update to v2.0.3 I had two bugs in there :)

- { loader: 'postcss-loader', options: { plugins: () => [...postcssPlugins] } }
+ { loader: 'postcss-loader', options: { plugins: [...postcssPlugins] } } // no {Function}

const scssLoader = [
  { loader: 'style-loader' },
  { loader: 'css-loader' },
  { loader: 'sass-loader' }
];

...

- loader: ExtractTextPlugin.extract(scssLoader),
+ use: ExtractTextPlugin.extract({
+   fallback: scssLoaders[0] // style-loader
+   use: scssLoaders.slice(1) // [ 'css-loader', 'sass-loader' ]
+  })

[michael-ciniawsky]

Reopen if still regressions 😛

[jy95]

You will joke, The only way I made this thing (v2.0.1) works is with this change :

{
      test: /\.(scss|sass)$/,
	  loader: ExtractTextPlugin.extract(scssLoader)
    },{ 
	  test: /\.css$/,
          use: ExtractTextPlugin.extract({
                 fallback: "style-loader",
                 use: "css-loader"
	  })
    }

v2.0.3 is only out 20h ago. I will test with the latest release when I have time

[michael-ciniawsky]

I wonder if scssLoader will work for .(scss|sass) extraction, bc of style-loaderapplied in use && not in fallback :D

[jy95]

@michael-ciniawsky already in v2.0.5 ? Good thing I didn't have tested it yet