I'm using images in my stylesheet (less) fine by doing:
.foo { background: url('../images/foo.png') }
When using HMR they're base64 encoded into the stylesheet which I'm fine about. However when compiling for production I want the images not to be embedded in the stylesheet. I've tried both url-loader and file-loader.
With url-loader I couldn't get it to emit the images properly. If I set no limit then the files were emitted to output/images/ and had the right size but weren't valid images. If I set the limit to something smaller than 8k the images were emitted to output and correct.
In either case the emitted images appeared in the CSS like so (example when using url-loader with limit=1):
url(data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhMDdjZWVkMGRiZTNlMjk5ODY5NWQ3ZjM4MzYxZDY1Zi5wbmciOw==);
Which when you decode it is:
module.exports = __webpack_public_path__ + "a07ceed0dbe3e2998695d7f38361d65f.png";
How do I get the css to use the URL rather than trying to base64 encode the value?
This is my webpack (still on webpack 1) loaders config:
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css!postcss'),
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css!less!postcss'),
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader?name=/images/[name].[ext]'
}
Update: Turns out disabling the less-loader stops the URLs from being encoded when using the url-loader (but the images are still not valid) but not when using the file-loader.
Update 2: Added a custom loader at the end of the css!less!postcss loaders and the source still has the image URL of ../images/foo.png so it appears the issue is further down the line. Also tried removing the ExtractTextPlugin but the compiled JS for the image then has the Base64 encoded value for the export like the CSS does.
It seems that having the 2 ExtractTextPlugins (for the css & less tests were causing the problems) as I don't have any css files I removed the first and it's now working as expected.
Related
Introduction
I have already setup bundling for my Javascript files with webpack in my project. Now I am in the process of adding CSS files to the webpack configuration. So far, I have been including the CSS files manually in the HTML header by adding <link> elements for every CSS file I depend on (e.g. bootstrap, my own css, etc.). Obviously this is not very elegant and using webpack would be much better, so I would like to replace the link elements and bundle them via webpack.
This should be easy, everything is pretty much documented in the webpack documentation. After reading the documentation and experimenting a bit with webpack I have arrived at the configuration below which already works.
Problem
The problem with my current setup is that I would like to have proper source map support and that does not seem to work. By proper, I mean that I expect that when I run a development build with webpack and I inspect some element in Chrome DevTools, that I will see from which file and which line in the file a certain CSS class originated and that I can click on the CSS rules and the browser jumps to that file.
I do not want to have inline styles in the head element, because then the browser will show something like .foobar { <style>..</style>, rather then .foobar { app.css:154.
With my current setup I have all CSS files combined (but not minified) into one app.css file. This means that if I inspect a bootstrap class such as .btn then it appears as .btn { app.css:3003. However, what I want to achieve is that the browser shows it as .btn { bootstrap.css:3003.
So now I am trying to understand how webpack and the different plugins such as css-loader and min-css-extract-plugin apply CSS source maps, and how I can configure them to achieve a proper debugging experience.
I am not sure how relevant this is, but when I navigate in DevTools under Sources to webpack://./bootstrap/dist/css/bootstrap.css I see that it only contains a single line:
// extracted by mini-css-extract-plugin.
Webpack Setup
index.js:
window.jQuery = require('jquery/dist/jquery');
require('bootstrap/dist/css/bootstrap.css');
require('bootstrap/dist/js/bootstrap');
/* other dependencies */
webpack.config.js:
const devMode = process.env.NODE_ENV !== 'production';
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
rules: [
{ /* Javascript rules excluded */ },
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
plugins: [
new UglifyJSPlugin (),
new HtmlWebpackPlugin({
template: 'app/index.tpl.html'
}),
new MiniCssExtractPlugin({ filename: devMode ?
'[name].css' :
'[name].[hash].css'
})
],
Conclusion
It seems I just passed the rubber duck test. While I was writing this I arrived at a solution. I will still publish the question, maybe it can help others.
The problem was that I was also using the mini-css-extract-plugin for development and not just for production. I thought that I needed to do that, because when at first I was using the style-loaded I would get styles included in the header and the browser would show me all styles as .foobar { <style>..</style>.
However, the actual problem seemed to be, that I was not using devtools. So the solution was to add devtool: devMode ? 'cheap-module-eval-source-map' : 'source-map', to the webpack configuration to conditionally use the style-loader plugin during development builds and mini-css-extract-plugin during production builds.
webpack.config.js
{
test: /\.css$/,
use: [
{
- loader: MiniCssExtractPlugin.loader,
+ loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
}
]
},
/* ... */
+ devtool: devMode ? 'cheap-module-eval-source-map' : 'source-map',
I was assigned a project where I need to stylize an application built with React + Wepback.
When I look at the output in the inspector element, I can see that most elements have a dynamically created class that looks like this: css-18s71b6
Looking at the styles, it's a stylesheet that's imported from a node module... Microsoft Frabric to be exact.
I'm able to add my custom stylesheet so that I can add my className to the elements but the problem I'm having is that my styles are never considered because React's dynamic css rule always has priority.
The only way to overcome this is by putting !important in all my css rules which doesn't make sense.
My guess is that I need to tell React + Webpack to use my stylesheet when compiling the dynamic inline css styles or to disable dynamic classes.
I'm completely new to React + Webpack. I've been working on this for hours, reading and testing but never found any solution. Any input is appreciated.
For what it's worth, my webpack.bable.js file looks like this
module: {
loaders: [{
test: /\.js$/, // Transform all .js files required somewhere with Babel
loader: 'babel-loader',
exclude: /node_modules/,
query: options.babelQuery,
}, {
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
},
[... more stuff ...]
}
After countless hours, I finally found the answer and am posting it in case other people have the same problem.
The problem is that in the config file, when you include: /node_modules/ it won't include your custom CSS styles. You need a separate loader to accomplish this.
My final webpack config looks like this
[...] {
// Preprocess our own .css files
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},{
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
} [...]
Notice that the first rule excludes node_modules and the second one includes /node_modules/
For more information on the topic, visit this forum post on Github.
When you're using the create-react-app package you're able to have .scss-files compiled into .css-files as you type in them. You can then do import './Header.css'; in your React component files and the styles are applied. It's easy to use your dev-tools and see where the styles are coming from.
Next.js tried to get everyone to use Styled-JSX to have your stylesheets inline inside your JSX files, similar to how web components (or Polymer) do it. I personally strongly dislike that approach.
Other problems:
Styled-JSX isn't supported in my IDE (Webstorm) (even the work-around looks awful);
Styled-JSX isn't supported in my dev-tools (Chrome) - there is no reference to what line the style is defined at;
It makes my source code look like a garbled mess;
How do I include 3rd party CSS solutions with Styled-JSX? Am I now supposed to add a <link> to my <head>? For everything external? How is that optimal usage of bandwidth? Referencing to files inside of node_modules feels awkward and bad, too.
So, just add rules to next.config.js, right?
module.exports = {
webpack: (config, { dev }) => {
config.module.rules.push(
{
test: /\.(css|scss)/,
loader: "style-loader!css-loader"
}
);
return config
}
};
And then just import './Page.scss'; (Don't worry, it's valid CSS, not even SASS yet, I know I did not include the sass-loader here just yet. I try to keep it simple first.)
Refresh the page (Server Side Rendered): does NOT work;
Save the file (dynamically loaded after saving the file): it does work (until you reload the page);
Keeps complaining the file can't be found, plenty of Google hits there, too. No real solutions that work today.
So, why doesn't it work with SSR?
Note that v5 of next.js will support CSS/Sass/Less almost out of the box:
For importing .css .scss or .less we’ve created modules which have sane defaults for server side rendering.
Until then, the following set of rules worked for me (assuming the .sass files are in /styles dir):
config.module.rules.push(
{
test: /\.(css|sass)/,
loader: 'emit-file-loader',
options: {
// this path is relative to the .next directory
name: 'dist/[path][name].[ext]'
}
},
{
test: /\.css$/,
use: ['babel-loader', 'raw-loader', 'postcss-loader']
},
{
test: /\.sass$/,
use: ['babel-loader', 'raw-loader', 'postcss-loader',
{ loader: 'sass-loader',
options: {
includePaths: ['styles', 'node_modules']
.map((d) => path.join(__dirname, d))
.map((g) => glob.sync(g))
.reduce((a, c) => a.concat(c), [])
}
}
]
}
)
I have a project that bundles the client-side files using Webpack. We are bundling the CSS using the ExtractTextWebpackPlugin. The problem is when I edit a javascript file the CSS bundle always gets re-built despite there being absolutely no changes to the CSS state.
How can I bundle CSS but only when there are changes to the CSS files?
Extracted from my webpack config:
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader'
})
},
...
plugins: [
new ExtractTextPlugin(isDebug ? '[name].css' : '[name].[chunkhash].css')
],
whenever ExtractTextPlugin sees a import statement with css extension it will automatically extract the text contant of that css file whethere it changes or not
if you are using it to debug then use style-loader and HMR(Hot Module Replacement) for better experence something like this
isDebug
? {
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
: {
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: "css-loader"
})
}
if you want to use current configration and don't want ExtractTextPlugin to build css file and you are importing them in your javascript file using import then somehow you have to remove import statement for css files when there is no change in that css file
and if you are adding css file in your webpack config entry section then it would be easy because webpack allow custom command argument and you can do this by exporting a function in your webpack config file insted of object
//webpack.config.js
module.exports = function(env) {
return {
entry: {
main: env.includeCss
?
["./src/index.js", "./src/main.css"] //build with css
: ["./src/index.js"] //build without css
},
.
.
.
.
}
}
you can pass env.includeCss by command argument like this
webpack --config ./webpack.config.prod.js --env.includeCss
//notice --env.includeCss witch will set env.includeCss as true
run with --env.includeCss normally and without --env.includeCss when you dont want to compile css file
Not directly related to your question but I noticed you use [chunkhash] for extracted CSS. This will make your css name change even if you haven't change content in you CSS files.
Use [contenthash] instead.
https://survivejs.com/webpack/optimizing/adding-hashes-to-filenames/#setting-up-hashing
If you are using ExtractTextPlugin, you should use [contenthash]. This way the generated assets get invalidated only if their content changes.
I have forked (or ejected) off Facebook's create-react-app project, with the requirement to add a few additional tools (e.g. testing, redux, less etc.), and the perhaps naive assumption that straying a bit off the path wouldn't be too much of a problem.
I think I have just about managed to add less using the following webpack.config.dev.js:
//......
module: {
preLoaders: [
{
test: /\.js$/,
loader: 'eslint',
include: paths.appSrc,
}
],
loaders: [
// Process JS with Babel.
{
test: /\.js$/,
include: paths.appSrc,
loader: 'babel',
query: require('./babel.dev')
},
{
test: /\.css$/,
loader: 'style!css!postcss'
},
{
test: /\.less$/,
loader: 'style!css!postcss!less'
},
{
test: /\.json$/,
loader: 'json'
},
//......
}
]
},//.....
I have left the CSS loader in there (perhaps incorrectly) so that I can bring in the react/bootstrap library. Perhaps there is a better way of doing this.
Anyway, I am confused about how to add a pre-processor into webpack.config.prod.js. Here is a snippet (with Facebook's helpful comments):
loaders: [
// Process JS with Babel.
{
test: /\.js$/,
include: paths.appSrc,
loader: 'babel',
query: require('./babel.prod')
},
// The notation here is somewhat confusing.
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader normally turns CSS into JS modules injecting <style>,
// but unlike in development configuration, we do something different.
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
// (second argument), then grabs the result CSS and puts it into a
// separate file in our build process. This way we actually ship
// a single CSS file in production instead of JS code injecting <style>
// tags. If you use code splitting, however, any async bundles will still
// use the "style" loader inside the async code so CSS from them won't be
// in the main CSS file.
{
test: /\.css$/,
// "?-autoprefixer" disables autoprefixer in css-loader itself:
// https://github.com/webpack/css-loader/issues/281
// We already have it thanks to postcss. We only pass this flag in
// production because "css" loader only enables autoprefixer-powered
// removal of unnecessary prefixes when Uglify plugin is enabled.
// Webpack 1.x uses Uglify plugin as a signal to minify *all* the assets
// including CSS. This is confusing and will be removed in Webpack 2:
// https://github.com/webpack/webpack/issues/283
loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
How can I add a less pre-processor step in a stable and performant way?
For context my index.js imports look as follows:
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import { CommentsSectionContainer } from './components/CommentsSection';
import './index.less';
Install less and less-loader from npm or yarn:
npm install --save-dev less less-loader
Follow this link to install extract-text-webkit-plugin:
https://github.com/webpack/extract-text-webpack-plugin
First you need to add the loader in the loaders array, after css probably makes sense for readability. It will look like this:
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
Then initialize the plugin in the plugins array:
new ExtractTextPlugin('[name].css')
Thaaaaaat should do it with another yarnpkg start