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'
Related
I've stumbled upon this repo vue-jekyll which is so close to my needs..
It's missing one thing though, the ability to add <style lang="scss" scoped>...</style> to the single file components, example here.
It seems that the original dev is MIA on this project - so I'm reaching out to anyone that might know how to add this functionality to Webpack. The current config is as follows:
module.exports = {
entry: {
// 🎌 OUR SOURCE FILE 🎌
jsSource: './js/source.js'
},
output: {
// 🎌 OUR DESTINATION 🎌
filename: './js/bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
},
{
test: /\.json$/,
use: 'json-loader'
},
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}
Any ideas? :/
I have been using webpack and yarn for a while now, to build this wordpress project using a theme from underscores.me, only recently my webpack does not seem to compile my sass anymore. If i make changes to my sass file they do not show up in the site. The webpack it self seems to run fine without error when i run webpack --watch but even if i delebrately write a wrong code in my scss the webpack don't even detects it. It does not seem to be away of what is happening.
Here is my configuration:
//webpack.config.js
var webpack = require('webpack');
var GoogleFontsPlugin = require("google-fonts-webpack-plugin");
// exports the node module
module.exports = function(env) {
'use strict';
return {
entry: "./js/app.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
/* ... */
plugins: [
new GoogleFontsPlugin({
fonts: [
{ family: "Source Sans Pro" },
{ family: "Raleway", variants: [ "400", "600","900", "700italic", "Regular", "Medium","Bold","Extra-Bold", "Black"] }
]
/* ...options */
})
],
module: {
loaders: [
{
test: /\.html$/,
loader: 'raw-loader',
exclude: /node_modules/
},
{
test : /\.css$/,
loaders: ['style-loader', 'css-loader', 'resolve-url-loader', "postcss-loader"]
}, {
test : /\.scss$/,
loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
},
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'url-loader'
},
// the url-loader uses DataUrls.
// the file-loader emits files.
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
// loader: "url?limit=10000"
use: "url-loader"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader'
},
{
// I want to uglify with mangling only app files, not thirdparty libs
test: /.*\/app\/.*\.js$/,
exclude: /.spec.js/, // excluding .spec files
loader: "uglify"
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
loaders: [
'file-loader', {
loader: 'image-webpack-loader',
options: {
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 7
},
pngquant: {
quality: '65-90',
speed: 4
},
mozjpeg: {
progressive: true,
quality: 65
},
// Specifying webp here will create a WEBP version of your JPG/PNG images
webp: {
quality: 75
}
}
}
]
}
]
}
}
}
I have the following css files:
<link rel="stylesheet" href="style/select.css">
<link rel="stylesheet" href="style/site.css">
and the following webpack config
var path = require("path");
module.exports = {
entry: {
app: './src/index.js'
},
output: {
path: path.resolve(__dirname + '/dist'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
'style-loader',
'css-loader',
]
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'file-loader?name=[name].[ext]',
},
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-webpack-loader?verbose=true&warn=true',
options: {debug: true, warn: true},
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
],
noParse: /\.elm$/,
},
devServer: {
inline: true,
stats: { colors: true }
},
resolve: {
mainFields: [ 'main'],
}
};
when I use webpack-dev-server, the in memory file server seems to have the correct css files. However when I call
yarn build
it does not copy the css files in my dist folder and therefore fails to load the css files.
Are you importing the css files in your modules? I think you need to use the ExtractTextWebpackPlugin which extract the css from the js bundle into a separate css file.
This will not work with webpack-dev-server though, so you need to disable the plugin in the configuration that you use for the dev server. There is an option that allows you to do that:
new ExtractTextPlugin({
filename: '[name].css',
disable: true,
}),
Try this config to webpack 4,
For loader:
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: {modules:true, importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [
postcssPresetEnv(/* pluginOptions */)
]
} }
]
For plugin section:
new MiniCssExtractPlugin({
filename: '[name].css' }),
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
I'm trying to get sass compilation to work with webpack using sass-loader and autoprefixer and postcssloader. The sass compilation is working successfully. However following along with the documentation for autoprefixing isn't working:
Add PostCSS Loader to webpack.config.js. Put it before css-loader and style-loader. But after sass-loader, if you use it.
So with just sass working, I had
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
],
sassLoader: {
includePaths: [path.resolve(__dirname, "./build")]
}
But reading the above, it seems like what I need is something like this.
'loaders': [
{
test: /\.scss$/,
loaders: ["sass"]
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1',
'postcss-loader'
]
},
{
test: /\.scss$/,
loaders: ["style", "css"]
}
],
sassLoader: {
includePaths: [path.resolve(__dirname, "./build")]
}
Also regarding:
Then create postcss.config.js:
I have made that file and put this inside
module.exports = {
plugins: [
require('precss'),
require('autoprefixer')
]
}
However, I get the following error
Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /path/to/scss/index.scss
and everything breaks. What's wrong with this configuration?
For my project, I arranged loaders in the following order to make it work with scss files.
loaders: [
'css-loader?modules&importLoaders=1',
'postcss-loader',
'sass-loader'
]
I found success with doing something like this:
module.exports = {
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: "babel-loader",
query: { presets: ["es2015", "stage-0", "react", "react-hmre" ]}
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "postcss-loader", "sass-loader"]
}
]
},
postcss: function() {
return [
require('precss'),
require('autoprefixer')
];
}
};