I am new to Cypress component testing and struggling to load the third-party CSS library like Tailwind CSS into my component script file. I have followed this tutorial to the tee
https://www.youtube.com/watch?v=vJ0rDP4CG-w
but for some reason, the tailwind CSS is not loaded. I am facing this issue
My log is giving me this error
ERROR in ./node_modules/tailwindcss/tailwind.css 1:0
Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
@tailwind base; | | @tailwind components;
My component.ts file looks like this
// ***********************************************************
// This example support/component.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
import { mount } from 'cypress/angular'
import "tailwindcss/tailwind.css"
// Augment the Cypress namespace to include type definitions for
// your custom command.
// Alternatively, can be defined in cypress/support/component.d.ts
// with a <reference path="./component" /> at the top of your spec.
declare global {
namespace Cypress {
interface Chainable {
mount: typeof mount
}
}
}
Cypress.Commands.add('mount', mount)
Upon further research, it turns out that I might not have a scss and URL loaders so I did
npm i --save-dev url-loader and npm i --save-dev sass-loader node-sass
so my custom webpack file looks like
module.exports = {
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
},
{
test: /\.(s(a|c)ss)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(woff|woff2|eot|ttf|svg|jpg|png)$/,
use: {
loader: 'url-loader',
},
},
],
},
};and I am passing my custom webpack configuration into my cypress config file like that
devServer: {
framework: "angular",
bundler: "webpack",
webpackConfig: require("webpack.custom.js"),
options: {
projectConfig: {
root: '',
sourceRoot: '',
buildOptions: {
outputPath: 'dist/frontend/browser"',
index: 'src/index.html',
main: 'src/main.ts',
polyfills: 'src/polyfills.ts',
tsConfig: 'tsconfig.app.json',
inlineStyleLanguage: 'scss',
assets: ["src/assets", "src/robots.txt", "src/static-404-page.html", "src/static-500-page.html"],
styles: ["src/angular-material.scss", "src/styles.scss"],
scripts: [],
buildOptimizer: false,
optimization: false,
vendorChunk: true,
extractLicenses: false,
sourceMap: true,
namedChunks: true,
},
},
},
},And finally, my component-index.html file looks like this, as close as to my prod environment
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="preload" href="https://example.com/fonts/icons/style.css" as="style" />
<link rel="dns-prefetch" href="https://example.com/" />
<link rel="dns-prefetch" href="https://example.com/" />
<link rel="dns-prefetch" href="https://api.example.com/" />
<link rel="stylesheet" href="https://example.com/fonts/icons/style.css" />
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>Despite all these configurations, I am still getting the same error, can someone tell me what is missing here?