Preact-cli: How to create a project with sass?

[nikitatrifan]

Sorry guys, maybe I'm stupid, but I'm literally CAN'T find any guide to create a project on preact-cli with sass usage instead of css.

So, could anyone help me with that?
preact create default app --sass is not working.

[SaraVieira]

Hi !

Can you tell me what is the error you are getting ?

[nikitatrifan]

@SaraVieira preact create default app --sass -> Unknown argument: sass

[lukeed]

There's no --sass flag anymore. Just install node-sass and sass-loader in your app and you're ready to go.

$ preact create default app
$ npm install --save-dev node-sass sass-loader

[nikitatrifan]

@lukeed I guessed it by myself but I got some errors in console.
`⚠ WARN ./node_modules/preact-cli/lib/lib/webpack/proxy-loader.js?{"__proxy_loader__":{"loader":"sass-loader","cwd":"/${projectpath}/app"},"sourceMap":true}!./src/components/Input/Input.sass
(Emitted value instead of an instance of Error)

⚠️ PostCSS Loader

Previous source map found, but options.sourceMap isn't set.
In this case the loader will discard the source map entirely for performance reasons.
See https://github.com/postcss/postcss-loader#sourcemap for more information.

@ ./src/components/Input/Input.sass 4:14-226 18:2-22:4 19:20-232
@ ./src/components/Input/Input.js
@ ./src/components/FeedbackForm/FeedbackForm.js
@ ./src/routes/Home/Home.js
@ ./src/components/App/App.js
@ ./src/index.js
@ ./node_modules/preact-cli/lib/lib/entry.js`

[lukeed]

@expdevelop Great! That's just a warning, and it's solved by #407

For the meantime (since it's annoying) you can do this:

let sass = helpers.getLoadersByName(config, 'sass-loader')[0];
sass.loader.options.sourceMap = true;

Hope that helps!

[botteu]

Where would I add this:
let sass = helpers.getLoadersByName(config, 'sass-loader')[0]; sass.loader.options.sourceMap = true;

[lukeed]

@botteu Inside a preact.config.js

[nikitatrifan]

@lukeed I got the error with that

Error: Error at /ProjectPath/preact.config.js: TypeError: Cannot read property 'loader' of undefined

export default function (config, env, helpers) { let sass = helpers.getLoadersByName(config, 'sass-loader')[0]; sass.loader.options.sourceMap = true; }

[botteu]

I get the same error.

Logging getLoaders seem to indicate that there are no entries for sass-loader, only proxy-loader that has an option with a loader prop set to sass-loader.

And those entries already have "sourceMap": true

[lukeed]

The latest (2.02) fixed the PostCSS warning -- so need for any custom preact.config.js changes.

But yes, I made a mistake -- sorry, was rushed at the time. You have to modify sass-loader thru the proxy-loader:

let sass = helpers.getLoadersByName(config, 'proxy-loader')[1];
console.log(sass.loader.options);

[jeanlucaslima]

This should be on top and/or in the documentation. I am just getting started and it was tricky, because Google gave #109 link first.

PS: should I open a new issue on documentation?

[lukeed]

@jeanleonino Sure! Definitely agree, it should be in the docs.