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.

Configure webpack to compile partially scss file

I am working with this Angular starter pack, works awesome, would recommend.
https://github.com/preboot/angular-webpack
However in the project I would like to have one global app.scss which contains more _partial.scss files, like most sass projects, then have the components encapsulated scss files inside they're own directory, which also use the globals scss file.
However when I try to import a partial scss file into app.scss I get this error in my browsers console.
./~/css-loader!./~/postcss-loader!./~/sass-loader/lib/loader.js!./src/style/app.scss
Module build failed:
#import 'settings/_color';
^
File to import not found or unreadable: settings/_color.
The files are definitely in the right directory, I just can work out why webpack cannot compile them.
I'm pretty sure it is on this line: 121
{
test: /\.(scss|sass)$/,
exclude: root('src', 'app'),
loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader', 'sass-loader']})
}
can anyone help I can get the app.scss to compile successfully with the partial files?

Webpack less-loader Missing Base Path on Production Build

I've got a vue-js app that uses webpack. Everything works fine in development and test environments, but I'm having trouble getting it to build for production.
I've got background images in the LESS files. The image files are in /static. (I'm not sure whether that's kosher or if they should be in side src/assets.)
At any rate, when the LESS has something like this:
background-url: url("/static/img/foobar/my-image.svg")
Then the compilted CSS will have the same url
background-url: url("/static/img/foobar/my-image.svg")
When the browser loaders, it can't find that imgate file. The browser is attempting to find the file here:
file:///static/img/foobar/my-image.svg
Can anyone recommend a way to prepend the absolute path when the app builds for production?

Do you have your static assets outside of our project directory in /static ?
Otherwise I don't get why your browser is trying to request it from file:///static/img/foobar/my-image.svg
anyway, your static assets should be part of your repo/project. They do not need to be in src directory, a /static folder within the root of your project is just fine.
when you compile your application - let's say into a dist folder - you should copy the images also in that dist folder. In my app I use the copy-webpack-plugin for that task (I have my images in ./public/assets/img/.. and I reference them as /assets/img/..)
const CopyWebpackPlugin = require('copy-webpack-plugin');
...
plugins: [
...
/** copy all files from the public folder to the compilation root */
new CopyWebpackPlugin([{
from: 'public',
to : ''
}]),
...
also you should make sure that you have the file-loader in place for your static assets. I use it like so:
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\??\#?v=[.0-9]+)?$/,
use : 'file-loader?name=assets/[name].[hash].[ext]'
}
I hope this will help you to resolve your problem.

I ended up moving the images into assets/img and then updating my webpack config to specify the directory using publicPath. Here's what it ended up looking like:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'file-loader',
include: [resolve('src')],
options: {
limit: 10000,
name: '/[name].[hash:7].[ext]',
publicPath: path.resolve(__dirname, 'app')
}

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",
},
],
},
...
...

load html files with webpack into angular app using ngtemplate-loader

I'm trying to load html partials in to my angular app using ngtempalte-loader I can't figure out how to only include a certain folder.
Lets say my tree structure is as so:
-root/
-webpack.config.js
-app/
-templates/
-template1/
-file.html
-template2/
And I'm using this in the config file for webpack:
{
test: /\.html$/,
loader: 'ngtemplate?prefix=app/templates/!html'
}
I also tried with
relativeTo=
But i have no luck... It always goes through all my app and picks up all the html files. I would like to just have the partials in this folder being dealt with ngtemplate-loader.
You guys know how?

Not sure if this is still relevant, but you can give this a try. You require Node's 'path' module for this.
{
test: /\.html$/,
loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './app/templates')) + '/!html'
}