Closed damms005 closed 1 year ago
Please provide:
I just tried to generate a new Quasar project and add the Cypress AE v4 beta, everything running fine here
quasar ext add @quasar/testing
in a fresh Quasar appquasar ext add @quasar/testing
on a fresh projectNote that the screencast uses Yarn. It is reproducible with Yarn/NPM.
PS. Dependencies in package.json:
"dependencies": {
"@quasar/extras": "^1.0.0",
"pinia": "^2.0.11",
"quasar": "^2.6.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0"
},
"devDependencies": {
"@quasar/app-vite": "^1.0.0",
"@quasar/quasar-app-extension-testing": "^2.0.5",
"@quasar/quasar-app-extension-testing-e2e-cypress": "^5.0.0-beta.7",
"@types/node": "^12.20.21",
"@typescript-eslint/eslint-plugin": "^5.10.0",
"@typescript-eslint/parser": "^5.10.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.10.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^9.0.0",
"prettier": "^2.5.1",
"typescript": "^4.5.4",
"cypress": "^10.10.0",
"eslint-plugin-cypress": "^2.12.1"
}
It's due to you not selecting SCSS preprocessor when creating the Quasar project I'll update
import 'quasar/src/css/index.sass';
to
import 'quasar/dist/quasar.prod.css';
but you'll need to manually update import 'src/css/app.scss';
to import 'src/css/app.css';
, as mentioned in the comment right before it
Thinking again about this, using import 'quasar/dist/quasar.prod.css';
would prevent user-defined SCSS variables to be picked up, so I'll leave it as is
I'll add a couple comments there suggesting how to use it without a preprocessor
In this instance where I have the Quasar app already setup without a CSS preprocessor, how can I now later add a CSS preprocessor, for example, something like postcss?
I guess you only need to add an app.scss
file into src/css
folder and then change the css
property into quasar.config.js
to reference it. Then you'll need to add a .postcssrc.js
file with the content that Quasar provides by default
All-in-all, you probably will have a better DX just by generating a new project with different creation options and copying over your files
Software version
OS: Linux Node: v18.9.0 NPM: v8.19.1
What did you get as the error?
What were you expecting?
The default Cypress test for the default/installed
QuasarButton.cy.ts
should run without errors.What steps did you take, to get the error?
Ran
npm run test:component
on a fresh Quasar app with Cypress AE/test harness installed