I use webpack for JS and now I want to use it for styles. I have a lot of styles in different folders and i want to compile them all without requiring each of them mannaully. The question is how to gather all the .less files in the folders and compile them via less-loader?
This isn't how webpack is meant to work, really. If you really want to do this, grunt/gulp is going to be a better choice.
Webpack's require mechanism ensures you build only the CSS you need for any given entry point, and gives you dependency management as well. If you do want to use webpack, but don't want to use the style-loader to insert them into the DOM etc., you can use the Extract Text plugin to build your compiled CSS into a separate file.
I found some workaround using require.context.
First you need to create a js file in the root of the styles folder if you don't have one.
Use this code if you use css or less and always extract them
require.context('./', true, /(\.less$)|(\.css$)/);
First argument is relative path to folder in which webpack should search for the files, second tells that it should search in subfolders and the last one is regexp of the extension of the files that webpack should require. Then you need to requre this file or use it as entry point. This works if you use extract-text-webpack-plugin but doesn't work otherwise.
Using styles without extracting them to style separate file
The example above doesn't work if you don't extract them because webpack generate modules with styles but doesn't execute them. This is complete example that works in both cases:
(function (requireContext) {
return requireContext.keys().map(requireContext);
} (require.context('../', true, /(\.less$)|(\.css$)/)));
Related
I'm on Webpack 5, compiling mostly Vue sfc sass styles, and currently I achieved to extract all the css styles to a single css bundle using mini-css-extract-plugin.
Obviously this bundle has grown in size and consequently the download stars taking s bit too much time, so I'm trying to split it in smaller chunks to parallelize the download.
Found this SO question, but the user managed to solve the problem using multiple entry points (which I want to avoid since the project is a spa (am I wrong?)) and this answer which suggest to configure mini-css-extract-plugin filename property to use a function instead of a string, but it seems not working since every chunk passed to the function seems having the same name/id, maybe due starting from a single entry point?
new MiniCssExtractPlugin({
// example
filename: (x) => {
console.log(x.chunk.name);
console.log("=====");
return "css/main.[contenthash].css";
}
}),
> webpack-demo#1.0.0 build
> webpack
main
=====
main
=====
main
=====
main
=====
...
How can I split the outputted css bundle to multiple files?
I am using vue.js (2.6.5) and webpack (5.77.1), and I enabled the source map feature in development env, with simple config as below:
mode: 'development',
devtool: 'eval-cheap-module-source-map',
.....
Well, the source map feature indeed works, but what confuse me is when you search a file name, there will be multiple files with same file name listed, see as below:
Only one of them is the exact original file definition, other files are definitions of render function of vue.js and some others. Every time I need to click on each one of them to check which is the exact original file, this annoys me, does any one know how to only show the exact original file ?
I have a problem with images in Vue.js Webpack
My Vue.js template :
(don't pay attention at red-line)
My package.json:
webpack.config.js:
and I am getting this error:
"Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)"
i tried to add url-loader, but its not working. How to fix it?
The main problem here is that your are using Webpack dynamic import with fully dynamic argument. This is not allowed - see the documentation for import() - same limitations described there applies also to a require() where the argument is expression instead of simple static string
You dont need the rquire inside the img tag, if those images are local, just provide the path, relative to your current file, and the name of the image file. That should work.
Also do not use url-loader in these cases, url-loader converts images to base-64 if they are small enough, and that will not work for dynamic stuff most of the time.
You could also try importing all those local images, and then write some logic that will decide which image to to put in the src.
like:
import bike from '#/assets/images/bike.jpg'
//in the tempalte:
<img :src="bike" />
This also works nicely, and it will not confuse vue-loader with dynamic imports in the template... if you have recent es features availabkle you could use dynamic import as well, but that depends on you and your code base...
Can't find any resources online, but i'm trying to optimize our in-house component library, which i'm trying to make more tree shaker friendly.
How with rollup can i leave .css files in the output along with maintain their import in the file.
I.E
Foo.js (inside import "./foo.css")
Foo.css
Output.
Foo.js (inside import "./foo.css" remains) created into module
Foo.css
This seems as straight forward as possible and iv'e found similar threads asking for this but zero responses. https://github.com/egoist/rollup-plugin-postcss/issues/204
Allowing this will basically mean when people who consume my project will only get critical css automatically.
I.E Import { Foo } from "xyz/foo" will automatically import the accompanying css file.
Unfortunately I couldn't find a solution with Rollup for what you're looking for. However, if you're open to using Webpack there's a plugin that would make this possible called MiniCssExtractPlugin. It creates CSS files per JS file and would achieve the structure you're wanting.
Short version: I would like to use a font set to REPLACE Glyphicons without also including Glyphicons CSS, and without modifying the source bootstrap.less file.
Long version:
Using Bootstrap's own Grunt file and source files as a base, by default a build process will include Glyphicons in the compiled CSS file.
Since I do not plan to use Glyphicons at all, the "lowest hanging fruit" for me is to go ahead and compile this way, but also include the font I will be using (for example, Font Awesome).
However, the more "elegant" way will be to only include the replacement font.
I can modify bootstrap.less, which includes this line:
#import "glyphicons.less";
such that the Font Awesome less file is used instead. However, the problem with this is that I am using Bootstrap as an "untouchable library" not as a modifiable source file. I want to be able to drop in new versions of Bootstrap at a moment's notice without the need to remember to change this modified line.
Does Grunt have the concept of "replace string A with string B in memory before the compile runs"? Or is there another way to accomplish my goal? Or should I just not worry about it and include both sets of compiled CSS?
I think you can use grunt-string-replace
https://github.com/erickrdch/grunt-string-replace