Overriding loader styles in webpack

Hello,

I’m trying to override webpack configuration so I can add some options on css-loader and postcss-loader. However I run into an issue that says:

./src/components/mycomponent/MyComponent.css
Module build failed: Syntax Error

(5:1) Unknown word

  3 | // load the styles
  4 | var content = require("!!../../../node_modules/css-loader/index.js?{\"importLoaders\":1,\"modules\":true,\"localIdentName\":\"[name]__[local]___[hash:base64:5]\",\"camelCase\":true}!../../../node_modules/postcss-loader/lib/index.js!./MyComponent.css");

after reading some issues over css-loader. It looks like the issue is that I’m overriding the styles that you already defined on razzle conf (see https://stackoverflow.com/questions/37031123/why-am-i-not-being-able-to-compile-sass-with-webpack) and that doesn’t go well. I guess that’s why Vue created vue-loader.

Given my scenario, should it be best just to fork your project and start from there?

[d4rky-pl]

@imjared I’ve been collecting helpers for razzle.config.js and putting them in module called razzle-config-utils so I don’t have to write the same find/findIndex hacks over multiple projects. You can check it out and see if it helps 😃

What you’re trying here would be possible with:

const { modifyRule } = require('razzle-config-utils')

module.exports = {
  modify: (config, {target, dev}, webpack) => {
    const appConfig = Object.assign({}, config);
    modifyRule(appConfig, { test: /\.css$/ }, (rule) => {
      rule.use = [
        'style-loader',
        { loader: 'css-loader', options: { modules: true, importLoaders: 1 } }, 
        'postcss-loader'
      ]
    })
    return appConfig;
  }
}

BTW, you’re mixing (very?) old webpack 1.x syntax with the new one - css should be css-loader and you should no longer specify your configuration as ?query&string but use options instead.

[d4rky-pl]

@jaredpalmer oh yeah, it’d be perfect 😃 I was actually planning to release this config (probably tomorrow) with some tweaks and configurability as npm package so it can be used in a simliar fashion to my-razzle-modifictions from README 😃