Webpack 2 stylesheets not loading

Question

I recently updated my application (current on Angular@4.1.3) from Webpack 1.x to Webpack 2.6.1. After following instructions from the migration docs, When I run the application, the external stylesheets do not load. I am using .scss for styles. When I inspect the code in developer tools, the styles is completely empty.

This is what I am using for loaders:

{
      test: /\.css$/,
      use: ['to-string-loader', 'css-loader']
    },

    /**
     * To string and sass loader support for *.scss files (from Angular components)
     * Returns compiled css content as string
     *
     */
    {
      test: /\.scss$/,
      use: ['to-string-loader', 'css-loader', 'sass-loader']
    },

    /**
     * Raw loader support for *.html
     * Returns file content as string
     *
     * See: https://github.com/webpack/raw-loader
     */
    {
      test: /\.html$/,
      use: 'raw-loader',
      exclude: [helpers.root('src/index.html')]
    }

Is not `loaders` key should be used? `{ test: /\.scss$/, loaders: ['to-string-loader', 'css-loader', 'sass-loader'] }` — VadimB, Jun 05 '17 at 13:55
@VadimB According to the [docs](https://webpack.js.org/guides/migrating/#chaining-loaders) when chaining loaders, the rule `use: [loader1, loader2]` should be used. — user3344978, Jun 05 '17 at 14:00

score 0 · Answer 1 · answered Jun 18 '17 at 19:32

I was managed to make the stylesheets work.

Key plugins are:

ExtractTextPlugin - For combining multiple CSS files CopyWebpackPlugin - Copy Assests to dist PurifyCSSPlugin - remove unused css OptimizeCssAssetsPlugin - Minify css files for env=build

Below is the webpack.config.js file:

const path = require('path');

// To remove unused css
const PurifyCSSPlugin = require('purifycss-webpack');
// Copy Assests to dist
const CopyWebpackPlugin = require('copy-webpack-plugin');
// For combining multiple css files
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// Minify css files for env=build
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');



let buildPlugins = [];
let basePath = path.join(__dirname, '/../');

if (env === EnvEnum.BUILD) {
  // minify css files if env is build i.e. production
  buildPlugins.push(new OptimizeCssAssetsPlugin());
}

module.exports = {
  // Entry, files to be bundled
  entry: {
    'myStyle.min.css': [
       basePath + '/src/styles/app.css',
       basePath + '/src/styles/other.css',
       basePath + '/src/bower_components/abc.min.css'
    ]
  },
  devtool: '',
  output: {
    // Output directory
    path: basePath + '/dist/styles/',
    // [hash:6] with add a SHA based on file changes if the env is build
    filename: env === EnvEnum.BUILD ? 'myStyle-[hash:6].min.css' : '[name]'
  },
  // Rules for bundling
  module: {
    rules: [{
      test: /\.css$/i,
      use: ExtractTextPlugin.extract({
        use: {
          loader: 'css-loader',
          options: {
            // ExtractTextPlugin tries to process url like in backgroun-image, url(), etc. We need to stop that behavior so we need this option
            url: false
          }
        }
      })
    }, {
      // Load all possible images included in css
      test: /\.(jpe?g|png|gif|svg|ico)$/i,
      loaders: [
       'file-loader?name=images/[sha512:hash:base64:7].[ext]',
       'image-webpack-loader?progressive=true&optimizationLevel=7&interlaced=true'
     ]
    }, {
      // Load all possible fonts format files included in css
      test: /\.(ttf|eot|svg|woff2?)(\?v=[a-z0-9=\.]+)?$/i,
      include: basePath + '/src/bower_components',
      loader: 'file-loader?name=fonts/[name].[ext]'
    }]
  },
  resolve: {
    alias: {},
    modules: [
      'src/bower_components/',
    ],
    extensions: ['.css', '.eot', '.woff', '.svg']
  },
  plugins: [
    // Bundling of entry files
    new ExtractTextPlugin((env === EnvEnum.BUILD ? 'myStyle-[hash:6].min.css' : '[name]')),
    // Copy css/images/fonts/js file(s) to dist
    new CopyWebpackPlugin([{
      from: basePath + '/src/bower_components/components-font-awesome/fonts',
      to: basePath + '/dist/fonts/'
    }, {
      from: basePath + '/src/fonts',
      to: basePath + '/dist/fonts/'
    }]),
    // To remove unused CSS by looking in corresponding html files
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync([
        path.join(basePath, 'src/*.html'),
        path.join(basePath, 'src/*.js')
      ])
    })
  ].concat(buildPlugins)
};

Let me know if you have any further concerns.

Webpack 2 stylesheets not loading

1 Answers1