We Keep Coding

what's the workflow of style-loader and css-loader

I'm new to webpack, still a little bit confused that how webpack cooperate with loaders. Let's we have below typescript file index.ts:
//index.ts
import "bootstrap/dist/css/bootstrap.css";
...
// typescript code
and below is the webpack config file:
module.exports = {
mode: "development",
entry: "./src/index.ts",
output: { filename: "bundle.js" },
resolve: { extensions: [".ts", ".js", ".css"] },
module: {
rules: [
{ test: /\.ts/, use: "ts-loader", exclude: /node_modules/ },
{ test: /\.css$/, use: ["style-loader", "css-loader"] }
]
}
};
Below is my personal thought on how webpack works with loaders, please correct me if I'm wrong:
Step 1-Webpack encounter index.ts, so it passes this file to ts-loader, and ts-loader read the file and pass it to ts compiler, ts compiler generates js code file index.js and pass back to ts-loader, then ts-loader passes index.js back to webpack.
Step 2- Webpack reads index.js and needs to resolve the css file, so Webpack passes the task to css-loader, so css-loader reads the css file as a long long string, then passes the task to style-loader, which creates js code that can be embedded in tags in the index.html file.
Step 3- bundle.js is ready, and client sends a http request to get index.html, and the bundle.js is fetched and create a <style> tags to include all css styles.
Is my above understanding correct? If yes, below is my questions:
Q1-after style-loader generates js code, does it pass those js code back to css-loader, then css-loader passes received js code to webpack? or style-loader pass generated js code to webpack directly?
Q2- in the webpack config file:
...
{ test: /\.css$/, use: ["style-loader", "css-loader"] }
...
it seems that the style-loader is used first, then css-loader steps in( I have tried this approach, it worked, not sure why it worked)
isn't that the css-loader should start to work first then style-loader as:
...
{ test: /\.css$/, use: ["css-loader", "style-loader"] }
...

Is my above understanding correct?
Yes
Q1-after style-loader generates js code, does it pass those js code back to css-loader, then css-loader passes received js code to webpack? or style-loader pass generated js code to webpack directly?
Answer: style-loader pass generated js code to webpack directly
Q2 it seems that the style-loader is used first, then css-loader steps in,
It can seem wrong. But its one of those things you need to read the docs for. The last thing to process it is mentioned at the top of the array. Personally I don't think the other way around would be any more intuitive.

How to configure Stylus support in a React.js application?

I want the classes in my React.js application to be available for export from .styl-files in the same way as it can be done from CSS Modules, but I can't find any ready-made solution to this problem.
I found a guide to setting up CSS Modules in an application created with Create React App.
I understand that you need to run npm run eject and somehow rewrite configuration files,
but how – I don't understand.

You need to install next npm-packages in your project:
stylus
stylus-loader
css-loader
In webpack.config, in section module you need to add next points:
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader?modules&camelCase&localIdentName=[path]__[name]__[local]--[hash:base64:5]',
'stylus-loader',
],
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
Then you can import your styles from .styl files in your React components like this:
import style from './СomponentStyle.styl';
and you can use style by CSS name for example:
className={style.container}
where container - it is name of CSS but without dot. For complicated names like: .container-btn-green you need write next code: style.containerBtnGreen or style['container-btn-green']

Run-time solution ( without eject )
install react-rewired and customize-cra to have an option to update config on run-time
npm i react-app-rewired
npm i customize-cra
create file config-overrides.js in the package.json folder with content :
const {
override,
addWebpackModuleRule
} = require("customize-cra");
module.exports = override(
addWebpackModuleRule({
test: /\.styl$/,
exclude: /(node_modules)/,
loaders: [
'style-loader',
{
loader: 'css-loader',
options: {url: false}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [require('autoprefixer')()]
}
},
'stylus-loader'
]
}),
addWebpackModuleRule({
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
})
);
install stylus
npm i stylus
npm i stylus-loader
npm i css-loader
change your start / build scripts to use react-rewired
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
...
Then you can import your styles from .styl files in your React components
require('./style/index.styl');
OR
import style from './СomponentStyle.styl'; --> className={style.container}
This all :) Additional thanks to Denis Bubnov in current topic - you helped me much to implement current solution!

Here is the link to configure stylus with create react app
https://github.com/flexzuu/create-react-app-styl

I like Surya's approach.
install stylus with
npm install stylus --save-dev
Create 2 folders /src/styl and /src/css
Drop some files into /src/styl.
Add the following scripts to your package.json:
"stylus:watch": "stylus -I ./node_modules -w ./src/styl -o ./src/css",
"stylus": "stylus -I ./node_modules ./src/styl -o ./src/css"
Run npm run stylus:watch in a second terminal. It will watch all files in /src/styl and compile them to css in /src/css where they will be picked up by your React dev server.
Before building your react app, make sure to run npm run stylus one last time.

Possible solution
Install stylus globally (just like it is described on their official website)
npm install stylus -g
Modify your build script in package.json
Mac/Ubuntu:
"scripts": {
"build:stylus": "find . -name *.styl -exec stylus {} --out ./build/static/css ;",
"build": "react-scripts build && npm run build:stylus",
}
Windows:
"scripts": {
"build:stylus": "for /r %v in (*.styl) do stylus %v --out ./build/static/css",
"build": "react-scripts build && npm run build:stylus",
}
In the scripts above we are calling the stylus command described below:
stylus <path-to-input-file.styl> --out <path-to-output-file\>

Npm package include images in CSS

I have an npm package with this structure:
--src
--styles
-image.png
-style.scss
The style.scss file is referencing the image like this:
.test {
background-image: url(./image.png);
}
The problem is when I consume the package, CSS is looking the image from the root and not relative to my package, how we can solve this issue?
This is how I'm importing the package:
#import "mypackage/src/styles/style";

I have this issue too and I do not find a elegant way to this issue. Finally I copied the referenced files to the build directory to solve this issue. The "copy-webpack-plugn" plugin was used(https://github.com/kevlened/copy-webpack-plugin)
You may refer to the following issue too(
Include assets from webpack bundled npm package)

All you need just install file loader like this.
npm install file-loader --save-dev
and then add this line to module part in your config :
module: {
rules: [{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}]
}

I have had this issue recently and the information on StackOverflow was outdated (as expected, this is a question that relates to NPM & Web Development and everything moves fast in this space).
Fundamentally, this problem is solved entirely by Webpack 5 as it comes out of the box. Only the webpack.config.js file needs to be updated.
The part of webpack's documentation that relates to this is here: https://webpack.js.org/guides/asset-modules/
What you want to do is Base64 encode your static assets and inline them to your CSS/JavaScript.
Essentially, when you are packing up your source code to distribute it on NPM, and you have some CSS file which refers to static images as such: background-image: url(./image.png) what you need to do is inline your assets to your style file, and then process your style file with the style-loader and css-loader packages.
In short, making my webpack.config.js contain the lines below solved my issue and allowed me to export one single index.js file with my package, which I imported into my other projects.
What really matters here is the type: asset/inline line, when we are testing for images.
webpack.config.js
...
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpg|gif)$/i,
type: "asset/inline",
},
],
},
...
...

Babel not compiling ES6 to ES5 Javascript [duplicate]

I have this code:
"use strict";
import browserSync from "browser-sync";
import httpProxy from "http-proxy";
let proxy = httpProxy.createProxyServer({});
and I have installed babel-core and babel-cli globally via npm. The point is when I try to compile with this on my terminal:
babel proxy.js --out-file proxified.js
The output file gets copied instead of compiled (I mean, it's the same as the source file).
What am I missing here?

Babel is a transformation framework. Pre-6.x, it enabled certain transformations by default, but with the increased usage of Node versions which natively support many ES6 features, it has become much more important that things be configurable. By default, Babel 6.x does not perform any transformations. You need to tell it what transformations to run:
npm install babel-preset-env
and run
babel --presets env proxy.js --out-file proxified.js
or create a .babelrc file containing
{
"presets": [
"env"
]
}
and run it just like you were before.
env in this case is a preset which basically says to compile all standard ES* behavior to ES5. If you are using Node versions that support some ES6, you may want to consider doing
{
"presets": [
["env", { "targets": { "node": "true" } }],
]
}
to tell the preset to only process things that are not supported by your Node version. You can also include browser versions in your targets if you need browser support.

Most of these answers are obsolete. #babel/preset-env and "#babel/preset-react are what you need (as of July 2019).

I had the same problem with a different cause:
The code I was trying to load was not under the package directory, and Babel does not default to transpiling outside the package directory.
I solved it by moving the imported code, but perhaps I could have also used some inclusion statement in the Babel configuration.

First ensure you have the following node modules:
npm i -D webpack babel-core babel-preset-es2015 babel-preset-stage-2 babel-loader
Next, add this to your Webpack config file (webpack.config.js) :
// webpack.config.js
...
module : {
loaders : [
{
test : /\.js$/,
loader : 'babel',
exclude : /node_modules/,
options : {
presets : [ 'es2015', 'stage-2' ] // stage-2 if required
}
}
]
}
...
References:
https://gist.github.com/Couto/6c6164c24ae031bff935
https://github.com/babel/babel-loader/issues/214
Good Luck!

As of 2020, Jan:
STEP 1: Install the Babel presets:
yarn add -D #babel/preset-env #babel/preset-react
STEP 2: Create a file: babelrc.js and add the presets:
module.exports = {
// ...
presets: ["#babel/preset-env", "#babel/preset-react"],
// ...
}
STEP 3:- Install the babel-loader:
yarn add -D babel-loader
STEP 4:- Add the loader config in your webpack.config.js:
{
//...
module: [
rules: [
test: /\.(js|mjs|jsx|ts|tsx)$/,
loader: require.resolve('babel-loader')
]
]
//...
}
Good Luck...

npm install --save-dev babel-preset-node5
npm install --save-dev babel-preset-react
...and then creating a .babelrc with the presets:
{
"presets": [
"node5",
"react"
]
}
...resolved a very similar issue for me, with babel 3.8.6, and node v5.10.1
https://www.npmjs.com/package/babel-preset-node5
https://www.npmjs.com/package/babel-preset-react

Same error, different cause:
Transpiling had worked before and then suddenly stopped working, with files simply being copied as is.
Turns out I opened the .babelrc at some point and Windows decided to append .txt to the filename. Now that .babelrc.txt wasn't recognized by babel. Removing the .txt suffix fixed that.

fix your .babelrc
{
"presets": [
"react",
"ES2015"
]
}

In year 2018:
Install following packages if you haven't yet:
npm install babel-loader babel-preset-react
webpack.config.js
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015','react'] // <--- !`react` must be part of presets!
}
}
],
}

Ultimate solution
I wasted 3 days on this
import react from 'react' unexpected identifier
I tried modifying webpack.config.js and package.json files, and adding .babelrc, installing & updating packages via npm, I've visited many, many pages but nothing has worked.
What worked? Two words: npm start. That's right.
run the
npm start
command in the terminal to launch a local server
...
(mind that it might not work straight away but perhaps only after you do some work on npm because before trying this out I had deleted all the changes in those files and it worked, so after you're really done, treat it as your last resort)
I found that info on this neat page. It's in Polish but feel free to use Google translate on it.

Webpack Loader not Working on Jenkins CI Build

I'm trying to integrate Weback into my current project and am having problems with a custom loader I built to create a concat banner and footer around each module's file contents, and to inject the __filenamevalue. Everything works great doing local builds with grunt
https://github.com/optimizely/marketing-website/tree/dfoxpowell/jordan-webpack-try/grunt/webpack
grunt server
//or
grunt build --env=production //production build for uglify/dedupe
Our staging build on Jenkins successfully runs the loader using grunt staging-deploy --branch=$branch --env=production
Our production build uses a Docker container and a deploy.sh script which runs grunt build --env=production. This build for some reason fails to run the loader although grunt build --env=production locally will successfully run the loader and build the assets.
I resorted to hardcoding the loader into the repo and requiring it by path in the make-webpack.config.js in order to debug if this was some sort of installation issue on Jenkins but this didn't help.
https://github.com/optimizely/marketing-website/blob/dfoxpowell/jordan-webpack-try/loaders/inject-filename-loader.js
I know this is most likely a difficult question to answer without access to our Jenkins deploy environment but any info you could offer for help debugging would be extremely helpful.
I created an issue in the Weback repo here that basically states the same info as above.
Update
I took this suggestion Injecting variables into webpack and added
resolveLoader: {
modulesDirectories: ['loaders', 'node_modules'],
extensions: ['', '.loader.js', '.js']
}
to my webpack.config and put my loaders directory in the root of my project. Unfortunately, the result is still the same and the loader doesn't run in prod on Jenkins.

Here is the solution I found to this issue:
Our CI build was installing our project from Git as a node_module through NPM rather than using git clone. Therefore, there was a node_modules directory at the root of the CI build, and the project was being built inside of this directory.
node_modules/<project npm package name>/{node_modules,grunt/webpack/...configs}
Therefore, it seems the loader was being looked for in the wrong node_modules directory, but it is strange that other loaders that I was using such as babel and handlebars were being sourced correctly.
When I used the loader path directly in the loader config
var injectFilenamePath = path.join(process.cwd(), 'grunt/webpack/inject-filename-loader');
console.log('LOADER PATH => ', injectFilenamePath);
var loaders = [
{
test: /\.js$/,
exclude: [
/node_modules/,
/bower_components/,
/libraries/
],
loader: injectFilenamePath + '?' + opts.injectFileNameParams
},
{ test: /\.hbs$/, loader: 'handlebars-loader' },
{test: /\.js?$/, exclude: ['bower_components', 'node_modules'], loader: 'babel-loader'}
];
the console output was
LOADER PATH => /opt/tmp/node_modules/marketing-website/grunt/webpack/inject-filename-loader
and after cloning our repo rather than npm i the path was
LOADER PATH => /opt/tmp/marketing-website/grunt/webpack/inject-filename-loader
Not sure if this somehow expected behavior but hopefully it saves others from similar issues if they arise.