Skip to content

Instantly share code, notes, and snippets.

@netsensei
Created June 10, 2020 15:11
Show Gist options
  • Save netsensei/07b4564be37d217a37293fae601a7b27 to your computer and use it in GitHub Desktop.
Save netsensei/07b4564be37d217a37293fae601a7b27 to your computer and use it in GitHub Desktop.
Compile plain SCSS with Webpack
// Easily compile plain SCSS or SASS if you want to use Webpack
// but you're not working on a JS project (React, Typescript, whathaveyou)
//
// Why? Webpack does what Grunt/Gulp does with half the configuration.
// See: https://alligator.io/tooling/webpack-gulp-grunt-browserify/
//
// You will need:
// npm install --save-dev autoprefixer
// npm install --save-dev css-loader
// npm install --save-dev file-loader
// npm install --save-dev mini-css-extract-plugin
// npm install --save-dev sass
// npm install --save-dev sass-loader
// npm install --save-dev style-loader
// npm install --save-dev webpack webpack-cli
//
// In package.json:
// "scripts": {
// "build": "webpack --config webpack.config.js"
// },
//
// Run this: npm run build
//
// Input: main.scss in a sass folder
// Output: style.css file in a public/css folder.
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path")
module.exports = {
entry: './sass/main.scss',
output: {
path: path.resolve(__dirname, 'public/css')
},
module: {
rules: [
// Extracts the compiled CSS from the SASS files defined in the entry
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader",
options: {
importLoaders: 2
}
},
{
loader: 'sass-loader'
}
]
}
],
},
plugins: [
// Where the compiled SASS is saved to
new MiniCssExtractPlugin({
filename: 'style.css',
allChunks: true,
})
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment