Configure webpack to compile partially scss file - javascript

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?

Related

Prevent webpack 4 pug loader from compiling mixin files

I'm really new to Webpack 4 and found a configuration issue I can not resolve.
I'm configuring Webpack for a multi page application. HTML template engine is PUG.
Files are compiled correctly, but when I create the bundle, Webpack is also compiling the mixins I have at "src/pug/mixins" folders. Therefore I get an .html file from every .pug mixin file I have.
How can I tell Webpack not to generate an .html file from a mixins located inside a folder?
I have the following at my webpack.config file:
module: {
rules: [
{
test: /\.pug$/,
use: ["pug-loader"],
exclude: [path.resolve(__dirname, 'src/pug/utils')]
},
However, all mixins inside utils folder are converted (i.e: utils/coreMixins.pug -> utils/coreMixins.html )
Thanks for your answers

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 use html-loader with webpack 4?

What should I type in <img> 'src' attribute to make html-loader replace it with URL? Assume folder 'public' is served via webpack-dev-server, project layout looks like
- src
- index.js
- img
- dog.jpg
- cat.jpg
- public
- index.html
webpack.config.js has rules for url-loader and html-loader:
{ test: /\.(png|jpg)$/, loader: 'file-loader' },
{ test: /\.(html)$/, loader: 'html-loader'},
index.js imports images:
import './../img/cat.jpg'
import './../img/dog.jpg'
And index.html has <script> for index.bundle.js. I expect <img src="dog.jpg"> to be processed, but this doesn't happen. Where am I wrong? Thanks.
By default every local is required (require('./image.png')). You may need to specify loaders for images in your configuration. I would highly recommend you to use file-loader or url-loader in this scenario in place of html-loader. Infact on html-loader's github documentation only suggest this.

Angular 2 and TypeScript. How to compile HTML templates?

So I have files *.ts and it is easy to understand how to compile into *.js using tsc. But a question is how to compile HTML templates which I use in *.ts files?
For example, this code appears after it is compiled and launched in HTML file:
<script id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.2.14.0.js'><\/script>".replace("HOST", location.hostname));
//]]></script>
You will need some sort of build system to import HTML before compiling your TS. One way is to use tools like webpack or systemjs to achieve this.
If you're using Webpack
You can use raw-loader to import HTML files as a string and inline them into your component's template.
Here's an example Webpack config (:
module: {
loaders: [
{
test: /\.html$/,
loader: 'raw-loader',
include: /src/,
exclude: [helpers.root('src/index.html')]
}
]
}
Then, in your template you can use:
template: require('./template.name.html')
You can read more about raw-loader here: https://github.com/webpack/raw-loader
After the loader runs it will import the html and your template will end up inline inside the TS when it is transpiled. e.g. template: '<div>your imported html</div>
If you're using SystemJs
You can use the text plugin. Add it to your config using:
System.config({
map: {
text: 'path/to/text.js'
}
});
Then import and inline your HTML into your component's template using:
template: require('./template.html!text');
You can read a bit more about the text plugin here:
https://github.com/systemjs/plugin-text

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'
}

Categories