Loading CSS stylesheets in transpiled Vue components inside Cypress

Question

So, I currently have Cypress set up to use vue-loader to load Vue SFCs via a webpack embedded preprocessor for Cypress (webpack-preprocessor). Here is the config for that.

const webpack_vue_cypress_config = {
  webpackOptions: {
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: vue_config
        },{
          test: /\.css$/,
          use: [ 'css-loader' ]
        }
      ],
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': "../../",
      }
    }
  },
  watchOptions: {},
}

module.exports = (on, config) => {
    on("file:preprocessor", webpack(webpack_vue_cypress_config));
}

The issue I am currently facing is that CSS files imported from node_modules via import/require (css-loader) are not loaded/included as part some tested SFC when running inside Cypress.

So, if I do this for a Pikaday picker inside a Vue SFC's script part:

import Pikaday from "pikaday";
import "pikaday/css/pikaday.css";

It looks like this inside Cypress:

But, when running in Webpack's dev-server it looks like this:

How is CSS injected into SFC's when using Cypress usually? Is my webpack config for the Cypress plugin wrong?

Answer 1

In order to include/import CSS files inside Cypress from SFCs, you need to use the vue-style-loader CSS loader, before the css-loader .

So this:

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

Should be this:

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