Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Webpack 4 config.js (SCSS to CSS and Babel) πŸ‘Œ The Simplest Usage πŸ‘Œ
{
"name": "webpack-sass",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.11",
"node-sass": "^4.8.3",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.1"
}
}
/* === dont forget to import scss to main.js file === */
/* ===> import './main.scss'; <=== */
var path = require("path");
module.exports = {
entry: "./main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/dist"
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: { presets: ["es2015"] }
}
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
}
]
}
};
@blairg

This comment has been minimized.

Copy link

blairg commented Jan 1, 2018

Thanks, just what I was looking for. Ended up with the below Webpack config.

`/* eslint-disable import/no-extraneous-dependencies /
/
eslint-disable arrow-body-style /
/
eslint-disable no-unused-vars */

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const bundleExtractPlugin = new ExtractTextPlugin({
filename: 'css/bundle.css',
});

const vendorsExtractPlugin = new ExtractTextPlugin({
filename: 'css/vendors.css',
});

module.exports = (env) => {
return {
name: 'client',
target: 'web',
entry: ['./src/client/app.jsx'],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'js/bundle.js',
},
module: {
loaders: [
{
test: [/.js$|.jsx$/],
exclude: [/node_modules/],
loader: 'babel-loader',
options: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react'],
},
},
{
test: /.scss$/,
exclude: [/node_modules/],
use: bundleExtractPlugin.extract({
use: ['css-loader', 'sass-loader'],
}),
},
{
test: /.css$/,
exclude: [/node_modules/],
use: vendorsExtractPlugin.extract({
use: ['css-loader'],
}),
},
],
},
stats: {
colors: true,
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
SOCKET_URL: JSON.stringify(process.env.SOCKET_URL ? process.env.SOCKET_URL : 'wss://localhost:3000'),
}),
bundleExtractPlugin,
vendorsExtractPlugin,
],
};
};
`

@mburakerman

This comment has been minimized.

Copy link
Owner Author

mburakerman commented Apr 6, 2018

@blairg Hey!

I updated the gist for Webpack 4 and tested. You can try again with Webpack 4! ✨

@ZibanPirate

This comment has been minimized.

Copy link

ZibanPirate commented Apr 11, 2018

@blairg is your config compatible with webpack 4 ?
and @mburakerman can i ask how to properly separate the style from the bundle, because am facing lots of issue with the combination: webpack 4 + extract-text-webpack-plugin, that would be very helpful

@drrudkh

This comment has been minimized.

Copy link

drrudkh commented Apr 12, 2018

@ZibanPirate try installing extract-text-webpack-plugin@next. That should solve compatibility issues.

@tvolk131

This comment has been minimized.

Copy link

tvolk131 commented Apr 15, 2018

Worked great for me, thx!

@gkatsanos

This comment has been minimized.

Copy link

gkatsanos commented May 3, 2018

Uhm, I think this https://github.com/webpack-contrib/mini-css-extract-plugin is suggested for Webpack 4 and having separate CSS files.

@AndreiSoroka

This comment has been minimized.

Copy link

AndreiSoroka commented Aug 4, 2018

@gkatsanos thx! working

@anker-shady

This comment has been minimized.

Copy link

anker-shady commented Aug 15, 2018

thx! it's working!

@Harismp

This comment has been minimized.

Copy link

Harismp commented Aug 28, 2018

./ClientApp/css/index.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

@import './variables.scss';
| @import './mixin.scss';
| @import './transition.scss';
@ ./ClientApp/boot-app.js 12:0-26
@ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot-app.js

@Harismp

This comment has been minimized.

Copy link

Harismp commented Aug 28, 2018

Please haelp me

@jnwelzel

This comment has been minimized.

Copy link

jnwelzel commented Sep 20, 2018

Thanks mate! πŸ‘

@NickolasBoyer

This comment has been minimized.

Copy link

NickolasBoyer commented Oct 4, 2018

For people experiencing a weird bug when running Webpack, you need to get the new Webpack-CLI with npm i webpack-cli@^3.1.1 -D.

If you want you can read more about it here.

@zilahir

This comment has been minimized.

Copy link

zilahir commented Nov 10, 2018

i am just wondering whether this is the best practice to inject stylesheet into js.

@hsumyat-thandar

This comment has been minimized.

Copy link

hsumyat-thandar commented Dec 4, 2018

I want to get output about multiple css file and multiple js file when I entry that files
What should I do about webpack config ?
please help me

@ghost

This comment has been minimized.

Copy link

ghost commented Dec 5, 2018

I was thinking the same thing as @zilahir

@onzag

This comment has been minimized.

Copy link

onzag commented Mar 16, 2019

Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type.

Halp!

@rebmullin

This comment has been minimized.

Copy link

rebmullin commented Mar 17, 2019

Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type.

I just came across this myself. Originally I was only importing scss but then I added an iconfont css file and I started seeing this. I updated the test regex to the following and then it worked:

// webpack.config
 {
        test: /\.(s*)css$/, // match any .scss or .css file, 
        use: [
          "style-loader", 
          "css-loader", 
          "sass-loader" 
        ]
      },

I am not an expert with webpack but I believe if you add something similar to the above or maybe even just adjust the regex here it might help.

@Ramehsudhanapu

This comment has been minimized.

Copy link

Ramehsudhanapu commented May 21, 2019

Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type.

@Ramehsudhanapu

This comment has been minimized.

Copy link

Ramehsudhanapu commented May 21, 2019

Module parse failed: Unexpected character '@' (4:0) You may need an appropriate loader to handle this file type.

@prasathmani

This comment has been minimized.

Copy link

prasathmani commented Jun 18, 2019

thanks , working.

@Rowleen

This comment has been minimized.

Copy link

Rowleen commented Jul 10, 2019

Thanks so much. It is work for webpack 4.35.3

@techyaura

This comment has been minimized.

Copy link

techyaura commented Sep 26, 2019

I am using GITHUB-LINK as a setup for webpack4 with scss, lazyloading, devserver. Working with the latest webpack version.

@wuubi

This comment has been minimized.

Copy link

wuubi commented Oct 23, 2019

Cheers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.