How to mix sass and scss with webpack?

by arnoldo.moen , in category: Javascript , 3 months ago

How to mix sass and scss with webpack?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by lindsey.homenick , 2 months ago

@arnoldo.moen 

To mix Sass and SCSS in a Webpack project, follow these steps:

  1. Install the necessary dependencies:
1
npm install sass-loader sass webpack --save-dev


  1. Configure Webpack to handle Sass/SCSS files by adding the following to your webpack.config.js file:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
module: {
    rules: [
        {
            test: /.(sa|sc|c)ss$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]
        }
    ]
}


This configuration tells Webpack to use the Sass loader (sass-loader) to interpret Sass/SCSS files and converts them to CSS, then use the CSS loader (css-loader) to process the CSS, and finally injects it into the HTML using the style loader (style-loader).

  1. Import Sass/SCSS files in your JavaScript files:
1
import './styles.scss'; // or styles.sass


  1. Create a new .scss or .sass file and start writing your Sass/SCSS code.
  2. Run your webpack build command:
1
webpack


Or if you have the webpack-cli installed globally:

1
webpack --config webpack.config.js


Webpack will now compile your Sass/SCSS files and bundle them into your final JavaScript file.


Note: Make sure you have the required loaders (style-loader, css-loader, sass-loader) installed and configured in your project's package.json file.