Currently, my setup involves using Cypress with vue-loader to load Vue Single File Components (SFCs) through a webpack embedded preprocessor specifically for Cypress (webpack-preprocessor). Below is the configuration for this setup.
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 current roadblock I am encountering is the failure of CSS files from node_modules imported via import/require (css-loader) to be loaded/included as part of some tested SFC when executed within Cypress.
For instance, if I attempt to include Pikaday picker in the script section of a Vue SFC like this:
import Pikaday from "pikaday";
import "pikaday/css/pikaday.css";
It renders differently within Cypress as opposed to when running in Webpack's dev-server:
https://i.sstatic.net/Yo5tp.png
When utilizing Cypress, how exactly is CSS injected into SFCs usually? Could there be an issue with my webpack configuration for the Cypress plugin?