vue-loader@15.0.0-rc.1 in a server bundle

Version

15.0.0-beta.1

Reproduction link

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/90#issuecomment-379007106

Steps to reproduce

Two options:

1. Using css-loader/locals:

module: {
  rules: [
    {
      test: /\.scss$/,
      include: includePaths,
      use: [
        "css-loader/locals",
        {
          loader: "sass-loader",
          options: { includePaths: ["node_modules"] },
        },
      ],
    },
    {
      test: /\.(styl|stylus)$/,
      use: [
        "css-loader/locals",
        "stylus-loader", //
      ],
    },
  ],
},

1. Using a null-loader:

module: {
  rules: [
    {
      test: /(\.css|.\scss|\.stylus|\.styl)$/,
      loader: "null-loader",
    },
  ],
},

What is expected?

The config above is for the Node.js server bundle. I omit the vue-loader and other loaders as they are irrelevant here.

Null-loader is expected to work properly, excluding styles from the bundle. Instead, I ended up using the first option above => css-loader/locals.

What is actually happening?

This is the error message that I receive when using null-loader, please refer to option two above:

ERROR in ./src/app/PageServerError.vue?vue&type=style&index=0&lang=stylus (./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/null-loader!./node_modules/vue-loader/lib??vue-loader-options!./src/app/PageServerError.vue?vue&type=style&index=0&lang=stylus)
Module build failed: CssSyntaxError: /project/src/app/PageServerError.vue:1:1: Unknown word
    at Input.error (/project/node_modules/postcss/lib/input.js:119:22)
    at Parser.unknownWord (/project/node_modules/postcss/lib/parser.js:506:26)
    at Parser.other (/project/node_modules/postcss/lib/parser.js:171:18)
    at Parser.parse (/project/node_modules/postcss/lib/parser.js:84:26)
    at parse (/project/node_modules/postcss/lib/parse.js:24:16)
    at new LazyResult (/project/node_modules/postcss/lib/lazy-result.js:70:24)
    at Processor.process (/project/node_modules/postcss/lib/processor.js:117:12)
    at compileStyle (/project/node_modules/@vue/component-compiler-utils/dist/compileStyle.js:29:35)
    at Object.module.exports (/project/node_modules/vue-loader/lib/loaders/stylePostLoader.js:9:33)
 @ ./src/app/PageServerError.vue?vue&type=style&index=0&lang=stylus 1:17-250
 @ ./src/app/PageServerError.vue
 @ ./src/app/entry-error.js

[yyx990803]

That’s the point: you need to have CSS in your SSR bundle for critical CSS inference, unless you are extracting all CSS (including those from async chunks) in the client build.

[ghost]

nice, it solves the problem I’m having