I want to reduce critical path CSS by rendering some styles inline. Currently, I'm using CSS modules like this:
import styles from './Componentstyles.scss';
...
<div className={styles.cls}>
I'm doing SSR and I want all styles to be inline in SSR. I.e. for SSR, instead of using a class + an external CSS file, I want to have the styles in style attributes.
Is there an existing loader that does this?
The relevant parts of my Webpack config looks like this:
{
test: /\.s?css$/,
include: [APP_ROOT],
exclude: [/node_modules/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[path][name]__[local]',
},
},
'postcss-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve('./src/styles/imports/variables.scss'),
path.resolve('./src/styles/imports/mixins.scss'),
],
},
},
],
},
Related
after build react app, css pseudo elements content is corrupted
should be content: "\e916"; (hex format)
but the result is content: ""; (char)
Use webpack 5.72 with require('mini-css-extract-plugin');
const cssRule = {
test: /\.scss$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '/',
},
},
'css-loader',
'postcss-loader',
'sass-loader',
],
};
Can you advise how to fix this? Well thank you
I recently tweaked my webpack modules in my React/Electron.js project to compile less files using less-loader, css-loader, and MiniCssExtractPlugin.loader instead of the style-loader since there is no window defined during part of the compilation, but now the font awesome icons are showing up as boxes and I'm not sure why that is.
The font awesome icons showed up fine when I had style-loader instead of MiniCssExtractPlugin.loader, but I only made this change for loading .less files, and not anything else, so I'm confused why this was affected.
I've tried adding .fa, .far, .fas { font-family: FontAwesome !important; } to my index.less file as suggested here, but this didn't help at all.
I also tried adding in the font-awesome-loader, but this seems to have a dependency of sass-loader#*, which I'm not using.
What's causing Font Awesome to load with style-loader but not MiniCssExtractPlugin.loader? I've included my webpack modules and my font-awesome import below:
module.exports = {
module: {[
{
test: /\.node$/,
use: 'node-loader',
},
{
test: /\.(m?js|node)$/,
parser: {amd: false},
use: {
loader: '#marshallofsound/webpack-asset-relocator-loader',
options: {
outputAssetBase: 'native_modules',
},
},
},
{
test: /\.tsx?$/,
exclude: /(node_modules|\.webpack)/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
},
{
test: /\.css$/,
use: [{loader: 'style-loader'}, {loader: 'css-loader'}],
},
{
test: /\.(woff(2)?|ttf|eot|svg|jpg|png|ico|icns)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
publicPath: '..',
},
},
],
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, {loader: 'css-loader'}, {loader: 'less-loader'}],
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.(config|variables|overrides)$/],
},
]},
plugins: [
new ForkTsCheckerWebpackPlugin(),
new MiniCssExtractPlugin(),
],
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.less', '.css'],
},
};
/* index.tsx */
import './index.less';
import '#fortawesome/fontawesome-free/css/all.css';
...
Everything got fixed when I changed index.tsx to import '#fortawesome/fontawesome-free/js/all.js'
{
test: /\.module\.scss$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } },
{
loader: 'css-loader',
options: {
modules: { localIdentName: '[local]---[hash:base64:5]' }
}
},
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: './src/css/_variables.scss'
}
}
]
},
{
test: /\.scss$/,
exclude: /\.module\.scss$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } },
'css-loader',
'sass-loader'
]
},
...
plugins: [
new MiniCssExtractPlugin({
filename: 'css/bundle.css'
})
]
I am creating a single css file that includes some vanilla sass styles and some css module styles. Is there a way to control this so that the module css comes AFTER the regular css in the outputted bundle.css file? It's always before it right now.
I've tried reordering them in the package.json. I've tried using oneOf.
I had this issue in my React app and after a lot of banging my head against the wall, realized it was the order of my App and components relative to the other css import. In hindsight this was very obvious, but it took me a while to get there.
// Imports css-modules in App and components in App first
// followed by global styles
import App from '$containers/App';
import '$scss/global.css';
...
render((
<App />
), document.getElementById('root'));
// Imports global styles first
// followed by css-modules in App and components in App
import '$scss/global.css';
import App from '$containers/App';
...
render((
<App />
), document.getElementById('root'));
You just need to import by the order and you should be good like this
#import "~bootstrap/scss/bootstrap";
#import "~font-awesome/scss/font-awesome";
#import "~toastr/toastr";
#import "~react-select/dist/react-select.css";
#import "~react-bootstrap-table/dist/react-bootstrap-table-all.min.css";''
My webpack config
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
],
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
}
]
}
You can view my full webpack here
I've been trying to figure out how to skip the CSS source maps in production, because I only need JS. Is there a way to do this?
I can just delete the *.css.map files later, but I think the build would be faster if I can skip them.
The following is a snippet from my webpack config. You can simply set the value of sourceMap option to false:
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
},
},
{
loader: 'resolve-url-loader',
},
{
loader: 'postcss-loader',
options: {
sourceMap: false,
},
},
],
},
You can also use suppress-chunks-webpack-plugin to remove the .css.map files, because webpack still writes them even if they are empty.
Add a new plugin to your config:
// Skip empty CSS source maps
new SuppressChunksPlugin([
{ name: 'your-entry', match: /\.css\.map$/ },
]),
in my react app I want to use fontawesome css files with webpack and the css loaders. my configuration looks like this:
webpack config
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
options: {
presets: [
["es2015", { modules: false }],
"stage-2",
"react"
],
plugins: [
"transform-node-env-inline"
],
env: {
development: {
plugins: ["react-hot-loader/babel"]
}
}
}
}, {
test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/,
loaders: ['file']
},
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
sourceMap: true,
importLoaders: 1,
localIdentName: "[name]--[local]--[hash:base64:8]"
}
},
"postcss-loader" // has separate config, see postcss.config.js nearby
]
},
]
in index.js I have this:
import 'font-awesome/css/font-awesome.css';
and in the render method i have this:
<li><NavLink to="/dashboard" className="fa fa-bars" activeClassName="activeSidebar"
aria-hidden="true"></NavLink></li>
There are noe errors, but also no icons displayed ... whats my mistake?
Thanks
You may need to add a name argument to the loader that handles the font files.
eg:
...
{
test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/,
loader: 'file-loader?name=./[name].[hash].[ext]'
},
...
If you're working with Webpack 2, you should always add the -loader suffix after each loader's name. Here's my portion of code that works correctly in my webpack.config.js:
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use:[{
loader: 'url-loader',
options:{
limit: 100000,
name: 'assets/resources/[name].[ext]'
}
}]
}
I'm using url-loader, but in this case it should work with file-loader too.
well, in my case, I shall add a small pattern after the extension for the url-loader and some include / exclude instructions.
This is because we want to have different tools for our css and imported ones.
The pattern added in url-loader is to handle import from font-awesome.css because they look like : src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
Here is the extract of my webpack.config.js file :
{
test: /\.css/,
loaders: [
'style-loader',
`css-loader?${JSON.stringify({
sourceMap: isDebug,
// CSS Modules https://github.com/css-modules/css-modules
modules: true,
localIdentName: isDebug ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
// CSS Nano http://cssnano.co/options/
minimize: !isDebug,
camelCase: 'dashes',
})}`,
'postcss-loader',
],
exclude: [
path.resolve(__dirname, './node_modules/font-awesome'),
],
},
// ...
{
test: /\.css/,
loaders: [
'style-loader',
'css-loader',
],
include: [
path.resolve(__dirname, './node_modules/font-awesome'),
],
},
// ...
{
test: /\.(png|jpg|jpeg|gif|woff|woff2)(\?.*$|$)/,
loader: 'url-loader?limit=10000',
},
Solution that worked for me is to add the css files in my www/index.html
then I can use the css like this:
<div className={`row`}>
Same with bootstrap and fontawesome