Fix Webpack's ability to load CSS while packaging an app

By: (plus.google.com) +David Herron; Date: August 2, 2018

Tags: Node.JS » Webpack

Web applications obviously will need CSS, and therefore Webpack must support packaging applications with CSS files. However with the sample Webpack build procedure I'm using, it fails while loading a CSS file. Let us take a look at the configuration changes required to fix this problem.

I'm developing a Vue.js component that I hope to deliver through the npm repository. I've already solved one problem having to do with loading JSON modules with Webpack. With that problem out of the way, I've come across another problem:

ERROR in ./node_modules/sl-vue-tree/dist/sl-vue-tree-dark.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .sl-vue-tree {
|     position: relative;
|     cursor: default;
 @ ./src/vue-file-tree.vue (./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/vue-file-tree.vue) 66:0-47
 @ ./src/vue-file-tree.vue

Obviously it is unable to load CSS files. Looking in the Webpack for another package I see this code:

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

...
module.exports = {
    ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        test: /\.html$/,
        use: 'vue-html-loader'
      },
      ...
    ]
    ...
  }
  ...
};

BUT -- IGNORE THIS BECAUSE IT IS INCOMPATIBLE WITH WEBPACK v4 ... SEE BELOW INSTEAD FOR USING mini-css-extract-plugin

After running this:

IGNORE THIS $ npm install extract-text-webpack-plugin --save

IGNORE THIS AS WELL I get the following error:

$ npm run build
...
ERROR in ./src/vue-file-tree.vue (./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/vue-file-tree.vue)
Module not found: Error: Can't resolve 'style-loader' in '/Volumes/Extra/akasha-tools/vue-file-tree'
 @ ./src/vue-file-tree.vue (./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/vue-file-tree.vue) 66:0-47
 @ ./src/vue-file-tree.vue
...

That's a step forward but still an error.

That's fixed with:

IGNORE THIS $ npm install style-loader --save

But another error crops up:

ERROR in ./node_modules/sl-vue-tree/dist/sl-vue-tree-dark.css
Module build failed (from ./node_modules/extract-text-webpack-plugin/dist/loader.js):
Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.pitch (/Volumes/Extra/akasha-tools/vue-file-tree/node_modules/extract-text-webpack-plugin/dist/loader.js:57:11)
 @ ./src/vue-file-tree.vue (./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/vue-file-tree.vue) 66:0-47
 @ ./src/vue-file-tree.vue

Which has to do with having been required to add this to the plugins array:

IGNORE THIS new ExtractTextPlugin("styles.css"),

Now the error is:

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/Volumes/Extra/akasha-tools/vue-file-tree/node_modules/webpack/lib/Chunk.js:824:9)
    at /Volumes/Extra/akasha-tools/vue-file-tree/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)
    at /Volumes/Extra/akasha-tools/vue-file-tree/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Volumes/Extra/akasha-tools/vue-file-tree/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:12:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Volumes/Extra/akasha-tools/vue-file-tree/node_modules/tapable/lib/Hook.js:35:21)
    at Compilation.seal (/Volumes/Extra/akasha-tools/vue-file-tree/node_modules/webpack/lib/Compilation.js:1203:27)
    at hooks.make.callAsync.err (/Volumes/Extra/akasha-tools/vue-file-tree/node_modules/webpack/lib/Compiler.js:547:17)
    at _err0 (eval at create (/Volumes/Extra/akasha-tools/vue-file-tree/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (/Volumes/Extra/akasha-tools/vue-file-tree/node_modules/webpack/lib/Compilation.js:1054:12)
    at processModuleDependencies.err (/Volumes/Extra/akasha-tools/vue-file-tree/node_modules/webpack/lib/Compilation.js:980:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)

The correct solution -- SKIP DOWN TO HERE

This error arises because up at the start I'd chosen the wrong CSS processor. I've left the incorrect advice in place above to show some of the incorrect results. (stackoverflow.com) https://stackoverflow.com/questions/51383618/chunk-entrypoints-use-chunks-groupsiterable-and-filter-by-instanceof-entrypoint

Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

This plugin has instructions at: (github.com) https://github.com/webpack-contrib/mini-css-extract-plugin

In the Webpack config use this instead:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

...

module.exports = {
    ...

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
              publicPath: '../'
            }
          },
          "css-loader"
        ]
      },
      ...
    ]
    ...
  }
  ...

  plugins: [
      ...
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
  ...
}
...

Once you have this plugin installed, run: $ npm run build

The build should work correctly at that point.

« Fix Webpack's ability to package an app using the mime module A file-system browser component for Electron/Vue.js applications »
2016 Election Acer C720 Ad block AkashaCMS Amazon Amazon Kindle Amazon Web Services America Amiga and Jon Pertwee Android Anti-Fascism AntiVirus Software Apple Apple Hardware History Apple iPhone Apple iPhone Hardware April 1st Arduino ARM Compilation Artificial Intelligence Astronomy Astrophotography Asynchronous Programming Authoritarianism Automated Social Posting AWS DynamoDB AWS Lambda Ayo.JS Bells Law Big Brother Big Finish Bitcoin Mining Black Holes Blade Runner Blockchain Blogger Blogging Books Botnets Cassette Tapes Cellphones China China Manufacturing Christopher Eccleston Chrome Chrome Apps Chromebook Chromebox ChromeOS CIA CitiCards Citizen Journalism Civil Liberties Clinton Cluster Computing Command Line Tools Comment Systems Computer Accessories Computer Hardware Computer Repair Computers Cross Compilation Crouton Cryptocurrency Curiosity Rover Currencies Cyber Security Cybermen Daleks Darth Vader Data backup Data Storage Database Database Backup Databases David Tenant DDoS Botnet Detect Adblocker Developers Editors Digital Photography Diskless Booting Disqus DIY DIY Repair DNP3 Do it yourself Docker Docker MAMP Docker Swarm Doctor Who Doctor Who Paradox Doctor Who Review Drobo Drupal Drupal Themes DVD E-Books E-Readers Early Computers Election Hacks Electric Bicycles Electric Vehicles Electron Emdebian Encabulators Energy Efficiency Enterprise Node EPUB ESP8266 Ethical Curation Eurovision Event Driven Asynchronous Express Face Recognition Facebook Fake News Fedora VirtualBox File transfer without iTunes FireFly Flickr Fraud Freedom of Speech Front-end Development Gallifrey git Github GitKraken Gitlab GMAIL Google Google Chrome Google Gnome Google+ Government Spying Great Britain Heat Loss Hibernate Hoax Science Home Automation HTTP Security HTTPS Human ID I2C Protocol Image Analysis Image Conversion Image Processing ImageMagick In-memory Computing InfluxDB Infrared Thermometers Insulation Internet Internet Advertising Internet Law Internet of Things Internet Policy Internet Privacy iOS Devices iPad iPhone iPhone hacking Iron Man iTunes Java JavaScript JavaScript Injection JDBC John Simms Journalism Joyent Kaspersky Labs Kindle Kindle Marketplace Lets Encrypt LibreOffice Linux Linux Hints Linux Single Board Computers Logging Mac Mini Mac OS Mac OS X Machine Learning Machine Readable ID macOS MacOS X setup Make Money Online March For Our Lives MariaDB Mars Mass Violence Matt Lucas MEADS Anti-Missile Mercurial MERN Stack Michele Gomez Micro Apartments Microsoft Military AI Military Hardware Minification Minimized CSS Minimized HTML Minimized JavaScript Missy Mobile Applications Mobile Computers MODBUS Mondas Monetary System MongoDB Mongoose Monty Python MQTT Music Player Music Streaming MySQL NanoPi Nardole NASA Net Neutrality Network Attached Storage Node Web Development Node.js Node.js Database Node.js Testing Node.JS Web Development Node.x North Korea npm NVIDIA NY Times Online advertising Online Community Online Fraud Online Journalism Online Photography Online Video Open Media Vault Open Source Open Source Governance Open Source Licenses Open Source Software OpenAPI OpenVPN Palmtop PDA Patrick Troughton Paywalls Personal Flight Peter Capaldi Phishing Photography PHP Plex Plex Media Server Political Protest Postal Service Power Control Privacy Production use Public Violence Raspberry Pi Raspberry Pi 3 Raspberry Pi Zero ReactJS Recaptcha Recycling Refurbished Computers Remote Desktop Removable Storage Republicans Retro Computing Retro-Technology Reviews RFID Right to Repair River Song Robotics Rocket Ships RSS News Readers rsync Russia Russia Troll Factory Russian Hacking Rust SCADA Scheme Science Fiction SD Cards Search Engine Ranking Season 1 Season 10 Season 11 Security Security Cameras Server-side JavaScript Serverless Framework Servers Shell Scripts Silence Simsimi Skype SmugMug Social Media Social Media Warfare Social Network Management Social Networks Software Development Space Flight Space Ship Reuse Space Ships SpaceX Spear Phishing Spring Spring Boot Spy Satellites SQLite3 SSD Drives SSD upgrade SSH SSH Key SSL Stand For Truth Strange Parts Swagger Synchronizing Files Telescopes Terrorism The Cybermen The Daleks The Master Time-Series Database Tom Baker Torchwood Total Information Awareness Trump Trump Administration Trump Campaign Twitter Ubuntu Udemy UDOO US Department of Defense Virtual Private Networks VirtualBox VLC VNC VOIP Vue.js Web Applications Web Developer Resources Web Development Web Development Tools Web Marketing Webpack Website Advertising Weeping Angels WhatsApp William Hartnell Window Insulation Windows Windows Alternatives Wordpress World Wide Web Yahoo YouTube YouTube Monetization