Develop Reference

How to apply sass loaders correctly to apply styles

I am working on a project where I am using several sass files and I am calling them into one single file, the problem is that when I try to apply the styles they don't show up.
sass files. Now this is how i configured my webpack.config.js file
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
assetModuleFilename: "images/[hash][ext][query]",
},
devtool: "inline-source-map",
devServer: {
contentBase: "./dist",
},
module: {
rules: [
{
test: /\.(s[ac]|c)ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
generator: {
filename: "static/[hash][ext][query]",
},
},
],
},
};
and this is the error i get
> restaurant#1.0.0 start /home/cvilla714/javascript/restaurant-page
> webpack serve --open
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./dist
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: asset main.js 943 KiB [emitted] (name: main)
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/ 345 KiB 26 modules
modules by path ./sass/*.scss 2.4 KiB
./sass/tabs.scss 366 bytes [built] [code generated]
./sass/main.scss 366 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./sass/tabs.scss 1.64 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./sass/main.scss 39 bytes [built] [code generated] [1 error]
modules by path ./src/*.js 4.48 KiB
./src/index.js 201 bytes [built] [code generated]
./src/tabs.js 2.42 KiB [built] [code generated]
./src/nav.js 1.86 KiB [built] [code generated]
ERROR in ./sass/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./sass/main.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
╷
7 │ $font-dancingScript: "Dancing Script", cursive;
│ ^
╵
sass/_layout.scss 7:47 #import
sass/main.scss 2:9 root stylesheet
# ./sass/main.scss 2:12-127 9:17-24 13:15-29
# ./src/nav.js 4:0-27
# ./src/index.js 3:0-31
webpack 5.18.0 compiled with 1 error in 2816 ms
ℹ ｢wdm｣: Failed to compile.
this is how I am importing the style to the project
import "../sass/main.scss";
I can't apply my styles to the project, I have been trying all day to fix this issue with no success, I would really appreciate if someone can please point me in the right direction.

Your Webpack config is correct. Error in your
$font-dancingScript: "Dancing Script", cursive;
adding ' must solve your problem;
$font-dancingScript: ' "Dancing Script", cursive ';
Config:
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.s[ac]ss$/i,
use: ["style-loader","css-loader","sass-loader"],
}

Webpack-dev-server — HMR Not receive update signal from WDS

HMR Not receive update signal from WDS
Operating System: MacOS 10.12.6
Node Version: 8.5.0
NPM Version: 5.3.0
webpack Version: 3.6.0
webpack-dev-server Version: 2.8.2
Code
// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
devServer: {
contentBase: './dist',
hot: true,
inline: true
},
entry: {
main: [
'./test/main.js'
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '__[name].js'
},
module: {
rules: [
{
test: /\.js?$/,
use: [
{
loader: 'babel-loader'
}
],
exclude: /\/(node_modules|bower_components)/
}
]
},
devtool: 'cheap-module-source-map',
plugins: [
new HtmlWebpackPlugin({
title: 'Hot Module Replacement'
}),
new webpack.HotModuleReplacementPlugin()
]
}
// ./test/main.js
console.log('Test')
if (module.hot) {
module.hot.accept()
}
Terminal output
webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
Hash: 07cd69bf3e44cc2f62fe
Version: webpack 3.6.0
Time: 990ms
Asset Size Chunks Chunk Names
__main.js 357 kB 0 [emitted] [big] main
__main.js.map 425 kB 0 [emitted] main
index.html 193 bytes [emitted]
[36] ./node_modules/webpack/hot/log.js 1.04 kB {0} [built]
[37] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./test/main.js 52 bytes {0} [built]
[38] (webpack)-dev-server/client?http://localhost:8080 7.27 kB {0} [built]
[39] (webpack)/node_modules/url/url.js 23.3 kB {0} [built]
[45] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {0} [built]
[47] (webpack)-dev-server/node_modules/loglevel/lib/loglevel.js 7.74 kB {0} [built]
[48] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
[80] (webpack)-dev-server/client/overlay.js 3.71 kB {0} [built]
[81] (webpack)-dev-server/node_modules/ansi-html/index.js 4.26 kB {0} [built]
[85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[87] (webpack)/hot/emitter.js 77 bytes {0} [built]
[88] ./node_modules/webpack/hot/dev-server.js 1.61 kB {0} [built]
[89] ./node_modules/webpack/hot/log-apply-result.js 1.31 kB {0} [built]
[90] ./node_modules/webpack/hot/emitter.js 77 bytes {0} [built]
[91] ./test/main.js 62 bytes {0} [built]
+ 77 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 538 bytes {0} [built]
[1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Compiled successfully.
Generated html on http://localhost:8080/ by HtmlWebpackPlugin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hot Module Replacement</title>
</head>
<body>
<script type="text/javascript" src="__main.js"></script></body>
</html>
Chrome Console
log.js:23 [HMR] Waiting for update signal from WDS...
main.js:1 >>>
client:77 [WDS] Hot Module Replacement enabled.
Then change main.js — console.log('>>>>') to console.log('Changed')
Chrome Console after changed main.js
log.js:23 [HMR] Waiting for update signal from WDS...
main.js:1 >>>
client:77 [WDS] Hot Module Replacement enabled.
client:80 [WDS] App updated. Recompiling...
client:213 [WDS] App hot update...

I try your config on Ubuntu via Docker:
Operating System: Ubuntu 17.04 Zesty
Docker: 17.06.2-ce, build cec0b72
Node image: 8.5.0
My Dockerfile:
FROM node:latest
### Configuration
RUN mkdir -p /code
COPY ./webpack.config.js /code
### Requirements
RUN npm install -g webpack-dev-server#2.8.2
RUN npm install babel-loader babel-core babel-preset-env
RUN npm install html-webpack-plugin
RUN npm install webpack#3.6.0
### Application
WORKDIR /code
EXPOSE 8080
All works fine:
I think your problem in MacOS environment.
I hope my answer help you find problem.

Why does Webpack build of React web app fail when project is built in a different folder?

I have a React project which was built using Webpack. The weird issue is when I run the React app in my original folder it builds and runs without any error. However when I copy all the files in the folder, paste it in a new folder and then try to build the same project it fails. I have tried changing the folder name, changing the config files to reflect the new folder name, however it always fails in app.js and points to an error in render method. Few points to note:
I havent hardcoded any paths
I have cleaned the node modules and rebuilt the project from groundup including cleaning npm cache.
The same project works in my original folder without any errors.
The error I get is as follows:
Version: webpack 2.2.1
Time: 1520ms
Asset Size Chunks Chunk Names
app.js 219 kB 0 [emitted] main
index.html 636 bytes [emitted]
chunk {0} app.js (main) 208 kB [entry] [rendered]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[32] ./src/app.js 783 bytes {0} [built] [failed] [1 error]
[33] (webpack)-dev-server/client?http://0.0.0.0:8080 4.16 kB {0}
[built]
[34] ./~/ansi-regex/index.js 135 bytes {0} [built]
[35] ./~/punycode/punycode.js 14.7 kB {0} [built]
[36] ./~/querystring-es3/decode.js 2.51 kB {0} [built]
[38] ./~/querystring-es3/index.js 127 bytes {0} [built]
[40] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
[47] ./~/sockjs-client/lib/main.js 11.9 kB {0} [built]
[49] ./~/sockjs-client/lib/transport-list.js 613 bytes {0}
[built]
[66] ./~/strip-ansi/index.js 161 bytes {0} [built]
[68] ./~/url/url.js 23.3 kB {0} [built]
[69] ./~/url/util.js 314 bytes {0} [built]
[70] (webpack)-dev-server/client/socket.js 897 bytes {0} [built]
[72] multi (webpack)-dev-server/client?http://0.0.0.0:8080
./src/app.js
40 bytes {0} [built]
+ 58 hidden modules
ERROR in ./src/app.js
Module build failed: SyntaxError: Unexpected token (39:2)
37 | // });
38 | ReactDOM.render(
> 39 | <div>Hello</div>,
| ^
40 | document.getElementById('content'),
41 | );
42 |
# multi (webpack)-dev-server/client?http://0.0.0.0:8080
./src/app.js
Child html-webpack-plugin for "index.html":
chunk {0} index.html 542 kB [entry] [rendered]
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 1.32
kB
{0} [built]
webpack: Failed to compile.
The above error doesn't happen when running in my original folder. What is the issue here?

Your .babelrc file is in the root of your project directory, and thats where webpack looks for it to use your loaders and presets. You can workaround by using the following config
{
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-app')], // <- Whatever preset you wish
cacheDirectory: true,
}
}
],
test: /\.js$/,
exclude: /node_modules/
},

resolving ts-loader in a path using webpack 2.2.1 in a script

Given the following gulp task.
I get error output
Module not found: Error: Can't resolve 'app.ts' in 'wwwroot/js/admin'
gulp.task("admin:js", function (done) {
module.exports = {
context: "wwwroot/js/admin",
entry: ["app.ts", "zippy.ts"],
output: {
filename: "admin.js"
},
devtool: "source-map",
module: {
rules: [
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
webpack(module.exports).run(onBuild(done));
});
with directory structure
wwwroot\js\admin\app.ts
wwwroot\js\admin\zippy.ts
I am getting this error:
Version: webpack 2.2.1
Time: 31ms
Asset Size Chunks Chunk Names
admin.js 2.87 kB 0 [emitted] main
admin.js.map 2.61 kB 0 [emitted] main
chunk {0} admin.js, admin.js.map (main) 40 bytes [entry] [rendered]
[0] multi app.ts zippy.ts 40 bytes {0} [built]
ERROR in multi app.ts zippy.ts
Module not found: Error: Can't resolve 'app.ts' in 'wwwroot/js/admin'
# multi app.ts zippy.ts
ERROR in multi app.ts zippy.ts
Module not found: Error: Can't resolve 'zippy.ts' in 'wwwroot/js/admin'
# multi app.ts zippy.ts
It's a path issue, as if I execute webpack from the command line, in the wwwroot\js\admin directory, without the context path, the files get bundled correctly and it all works.
When I use the API script, and execute from the project root (relative to .\wwwroot\js\admin) I get the error output.

webpack does not support the use of relative paths in the context configuration entry.
changing context as follows:
module.exports = {
context: __dirname + "/wwwroot/js/admin",
...
corrected the output.
Version: webpack 2.2.1
Time: 2337ms
Asset Size Chunks Chunk Names
admin.js 1.24 MB 0 [emitted] [big] main
admin.js.map 1.48 MB 0 [emitted] main
chunk {0} admin.js, admin.js.map (main) 1.24 MB [entry] [rendered]
[0] ./~/angular/index.js 48 bytes {0} [built]
[1] ./wwwroot/js/admin/app.ts 408 bytes {0} [built]
[2] ./wwwroot/js/admin/zippy.ts 1.16 kB {0} [built]
[3] ./~/angular/angular.js 1.24 MB {0} [built]
[4] multi ./app.ts ./zippy.ts 40 bytes {0} [built]
[10:30:37] Finished 'admin:js' after 2.43 s

How do i extract jquery and react from main bundle to common.js?

I already solved that problem with require.ensure but my code is ugly with all this reqiure.ensure. All i really want is to extract react-dom and jquery into separate common.js file. But all i get is code duplication =/
Here is my webpack.config
context: __dirname+ "/resources/app",
entry: {
main: './main.jsx',
common: ["jquery","react","react-dom"]
},
progress: true,
output: {
publicPath: "/js/",
path: __dirname+"/public/js",
filename: '[name].js',
library:"[name]"
},
and here is my plugins:
plugins: [
new webpack.optimize.CommonsChunkPlugin({ name: "common" }),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.NoErrorsPlugin(),
]
Asset Size Chunks Chunk Names
main.js 244 kB 0 [emitted] main
common.js 232 kB 1, 2 [emitted] common
When I import $ from 'jquery' all jquery code adds to main.jsx
jquery module just added to main.js, even it's already exists in in common.js
Asset Size Chunks Chunk Names
main.js 330 kB 0 [emitted] main
common.js 232 kB 1, 2 [emitted] common