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

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

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

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

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

commented Apr 15, 2018

Worked great for me, thx!

@gkatsanos

This comment has been minimized.

Copy link

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

commented Aug 4, 2018

@gkatsanos thx! working

@anker-shady

This comment has been minimized.

Copy link

commented Aug 15, 2018

thx! it's working!

@Harismp

This comment has been minimized.

Copy link

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

commented Aug 28, 2018

Please haelp me

@jnwelzel

This comment has been minimized.

Copy link

commented Sep 20, 2018

Thanks mate! πŸ‘

@NickolasBoyer

This comment has been minimized.

Copy link

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

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

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

commented Dec 5, 2018

I was thinking the same thing as @zilahir

@onzag

This comment has been minimized.

Copy link

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

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

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

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

commented Jun 18, 2019

thanks , working.

@Rowleen

This comment has been minimized.

Copy link

commented Jul 10, 2019

Thanks so much. It is work for webpack 4.35.3

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.