[Question] Add scss support

[RichForever]

Hi, are you planning to add scss support for custom styles? I mean any compiler or something? I’m using gulp for this in another theme and I want to switch to your theme but this is the thing that missing.

[Chris Earls]

Hi! The theme uses Laravel Mix, which supports Sass. It should take minimal updates to your webpack.mix.js file. I've linked to the documentation below.

https://laravel-mix.com/docs/main/sass

[RichForever]

Sweet! I’ll take a look. Thanks

[RichForever]

Hmm, I think I can't make it work. Can you help me? I added new line in the webpack mix file. So now it looks like

`const mix = require('laravel-mix');
const fs = require('fs');

mix
.sass('theme/assets/styles/app.scss', 'theme/assets/build/')
.setPublicPath('theme/assets/build/')
.js('theme/assets/scripts/app.js', 'theme/assets/build/')
.postCss('theme/assets/styles/app.css', 'theme/assets/build/', [
require('tailwindcss'),
])
.version()
.postCss('theme/assets/styles/editor-style.css', 'theme/assets/build/', [
require('tailwindcss'),
]);

if (fs.existsSync('browsersync.config.js')) {
const config = require('./browsersync.config');
mix.browserSync(config);
}
`

I created file app.scss in the directory theme/assets/styles/app.scss, then run command npm run development. Everything seems to be ok but it's not. The script create new directories inside build dir. Below I'm adding the screenshots.

Before run any command.

After run command

When I went to the build directory

What am I doing wrong?

@edit Nevermind. I placed sass line in the wrong place. Everything is working now.

[Chris Earls]

That's good to hear. I'm glad you got it working!