Webpack build scss

Hi community :slight_smile:
I started working with jitsi and it’s cool!
But there is a strange stuff with build that i see: seems that webpack ignores changes in scss files and i need to do make deploy-css each time when i change the styles.
Is there a way to integrate css build into webpack dev?

Thanks :slight_smile:

1 Like

So far i found 2 ways to handle scss for dev build:

  1. Use npm-watch + concurrently to build scss while webpack is running
    here is excerpt of my package.json that does the trick:
"scripts": {
    "styles": "make deploy-css || exit 1",
    "watch-styles": "npm-watch styles",
    "start": "concurrently \"make dev\" \"npm-watch\"",
},
"watch": {
    "styles": {
      "patterns": [  "/css/**/*"  ],
      "extensions": "scss"
    }
}

after adding this you need to start dev server by using npm run start instead of make dev

  1. I haven’t completed this approach due to lack of time, but will share my steps anyway.
    You need to install mini-css-extract-plugin and sass-loader and use it in webpack config by adding section to rules

{
test: /.scss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: ‘css-loader’, options: { url: true }},
‘sass-loader’
]
},
and plugin to plugins section:
new MiniCssExtractPlugin({
filename: ‘all.css’
})
At this point you may have bunch of errors in paths to images, fonts, etc in scss.
To resolve them you need to make file-loader load them for you
{
test: /.(eot|svg|ttf|woff|woff2)(?.*)/i, loader: 'file-loader', include: path.join(__dirname, 'fonts'), options: { limit: 10000, name: '[name].[ext]?[hash]', outputPath: 'fonts/', } }, { test: /\.(png|jpg|jpeg|gif)(\?.*)/i,
loader: ‘file-loader’,
include: path.join(__dirname, ‘images’),
options: {
limit: 10000,
name: ‘[name].[ext]?[hash]’,
outputPath: ‘images/’,
}
},
Here i started touching scss to fix the errors, but it took too long, so i reverted everything and used 1st approach :slight_smile: If anyone reading this can successfully do the 2nd one - please share your solution here :wink:

First Approach works. Thank you.