Upgrading to Version 3.0

[curateship]

Hi team. I'm trying to upgrade to version 3.0. The steps I got to is replacing the _base.scss to use the new @use after installing the new compiler. What does it mean? Thanks

[Browsersync] 1 file changed (app.css) [14:06:49] Finished 'sass' after 206 ms [14:06:55] Starting 'sass'... Error in plugin "sass" Message: resources\sass\components\_1_alert-card.scss Error: wrong number of arguments (2 for 1) for alpha'
on line 38 of resources/sass/components/_1_alert-card.scss
from line 12 of resources/sass/style.scss

background-color: alpha(var(--color-contrast-higher), 0.1);`

[sebastiano-guerriero]

Hi! v3 uses the new SASS modules, therefore the way SCSS files are imported is different. If you're importing the framework as an npm module, you should modify the style.scss file and the update the custom-style/* files (where you need to import the 'base' style). You can download v3 and use it as a reference for how the base is imported (by inspecting the style.scss file).

More info here:
https://codyhouse.co/blog/post/codyframe-3-0#how-to-upgrade

Cheers

[curateship]

I installed dart-sass and updated my codyhouse version in package.json to 3.0.3. Copied the code from style.scss from the repo, as well as all the custom-styles. I don't get the error above anymore but it doesn't want to compile properly. My page shows with zero styling applied, its all html. What did I do wrong?

[curateship]

My compiled file just has this:
@use 'base' with ( $breakpoints: ( 'xs': 32rem, // ~512px 'sm': 48rem, // ~768px 'md': 64rem, // ~1024px 'lg': 80rem, // ~1280px 'xl': 90rem // ~1440px ), $grid-columns: 12 );/*! purgecss start ignore */@use 'custom-style';@use 'components/**/*.scss';/*! purgecss end ignore */

[claudia-romano]

Hi, could you double-check that you are using dart-sass? Even if you have installed it, you may need to select it in your config file.
For example, if you are using gulp, you need to set it as your compiler:

var sass = require('gulp-sass');
sass.compiler = require('sass');

[curateship]

Yes I removed node-sass and installed dart-sass. I have this in my gulpfile

var sass = require('gulp-sass'); sass.compiler = require('sass');

And I have this in my dependencies

}, "dependencies": { "@editorjs/editorjs": "^2.18.0", "@fullhuman/postcss-purgecss": "^3.1.3", "bootstrap": "^4.5.2", "dart-sass": "^1.25.0", "jquery": "^3.5.0", "medium-editor": "^5.23.3", "popper.js": "^1.16.1" }

[claudia-romano]

Thanks for checking that. Do you have any additional error messages?