I am trying to include the bootstrap css file in my app using Webpack (v4.5) using the instructions found on the offical website (https://getbootstrap.com/docs/4.0/getting-started/webpack/) but am getting the following error when running webpack.
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css Module parse failed: Unexpected token (6:3) You may need an appropriate loader to handle this file type.
I have tried all I can think of to get this working but am afraid I am probably missing something really obvious.
I import the css into my code using: import 'bootstrap/dist/css/bootstrap.min.css';
And my webpack config looks like:
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: { presets: ['react-app'] },
},
],
}
I have both css-loader and style-loader installed and am using the same webpack config that bootstrap displays in their docs.
Can anyone see what I am doing wrong?
Do this first
npm install --save-dev css-loader
and then this
npm install --save-dev style-loader
After installing change your configuration like this
{
test: /\.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: 'css-loader'
},
{
loader: 'style-loader'
}
]
})
}
Related
I'm building a SSR React App with Webpack3 and Babel6 but when I run the server, it cannot find any css file (Error: Cannot find module './file.css').
Here is my folder structure so far:
src/
|-components/
|-App/
|-App.css
|-App.jsx
App.jsx
....
import './App.css';
....
webpack.config.js
....
module.exports: { loaders: [
....
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'], // I have loaders installed and included in package.json devDependencies
include: path.join(__dirname, 'src'),
exclude: /node_modules/
}
....
]}
Any ideas?
By default when you install packages locally, they go into node_modules folder in your project directory, therefore style-loader and css-loader are also included there. From your webpack.config.js file you are excluding this packages, which are needed in compiling your css assets. just remove the exclude line and every thing would be fine.
your webpack.config.js file would look like this.
webpack.config
....
module.exports: { loaders: [
....
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'],
include: path.join(__dirname, 'src'),
}
....
]}
I have just configured my project with style-loader and css-loader -
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['babel'],
include: path.join(__dirname, 'scripts')
},{
test: /\.css$/,
loaders: [ 'style-loader', 'css-loader' ]
}
]
}
Which works perfectly but then i encountered a problem with my .jpn image.
ERROR in ./scripts/radio.jpg Module parse failed:
C:\Users\barak\WebstormProjects\FinalProjectRadioStream\scripts\radioo.jpg
Unexpected character '�' (1:0) You may need an appropriate loader to
handle this file type.
Any recommendations about images loaders? some simple way for using images in css files with react and webpack?
Thanks.
I think you are using webpack.
You need to config for image loader files like this (use 'file-loader'):
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
}
Learn more: https://webpack.js.org/loaders/file-loader/
My Webpack config contains the following loaders.
module: {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
{ test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/ }
]
},
Then, I wished to pull out the CSS to a separate file and I tried using the extract text webpack plugin, alternating my config like this.
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module: {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
// { test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/ }
{
test: /\.sass$/,
loader: ExtractTextPlugin.extract(
{
loaders: ["css-loader", "sass-loader"],
fallbackLoader: "style-loader"
}
),
exclude: /node_modules/
}
]
},
plugins: [new ExtractTextPlugin("global.css")],...
However, it fails with. Probably due me not specifying the loaders correctly. How can I specify multiple loaders (one for SASS and one for CSS)?
Module not found: Error: Cannot resolve module '[object Object]' in C:\Source\Poc\TestProj
# ./index.js 7:14-38
I've checked the file index.js but I can't see anything wrong there. It's literally empty export, as shown below. And the reference to 7:14-38 says nothing to me. There aren't that many lines in the file, even...
import CssGlobal from "./global.sass";
//document.write("Banana!");
export default {}
This syntax for ExtractTextPlugin.extract() only works in webpack2 and above, apparently (an object as argument). Check this issue.
In order to make it work with webpack1, the syntax is:
ExtractTextPlugin.extract([notExtractLoader], loader, [options])`
notExtractLoader (optional) the loader(s) that should be used when the css is not extracted (i.e. in an additional chunk when allChunks:
false)
loader the loader(s) that should be used for converting the resource to a css exporting module.
Source: https://github.com/webpack/extract-text-webpack-plugin/blob/webpack-1/README.md
So, a working config file would be:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
/* ... */
module : {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
{
test: /\.sass$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
/* using ExtractTextPlugin.extract(["css","sass"]) works too */
}
]
},
plugins: [
new ExtractTextPlugin("styles.css")
]
}
This will genereate a styles.css file.
Loaders are transformations that are applied on a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source.
For example, you can use loaders to tell webpack to load CoffeeScript or JSX.
Nicely Explained here
http://ui-codeman.blogspot.in/2017/02/webpack.html?view=sidebar
Using React with webpack.
Ran through some articles, but most of them suggest calling individual scss file for each component. But I would like to precompile all css into single file for entire application like we do using grunt/gulp.
You can use the webpack-text-extract-pluggin that is in charge of compiling all css files and bundling them in an index.css file.
Also note that you'll need to install sass-loader too in order to compile the scss.
In the webpack config:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
config = {
...,
plugins: [
...,
new ExtractTextPlugin('index.css')
],
module: {
loaders: [
...
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style','css')
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css!sass')
}
]
}
}
In index.html:
<link rel="stylesheet" type="text/css" href="/index.css">
In any Javascript file that gets through webpack:
require("./styles/my-custom-file.scss");
You could take a look at the extract-text-webpack-plugin.
After requiring this in your webpack.config.js:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
You can rewrite your sass loader to this:
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css', 'sass')}
]
},
plugins: [
new ExtractTextPlugin('bundle.css')
]
For more options and usage check the link above.
I'm trying to use FontAwesome in my app. I'm using webpack to do it's magic. My config is:
resolve: {
// you can now require('myfile') instead of require('myfile.cjsx')
extensions: ['', '.js', '.jsx', '.cjsx', '.coffee']
},
module: {
loaders: commonLoaders.concat([
{ test: /\.css$/, loader : 'style-loader!css-loader' },
{ test: /\.(ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/, loader : 'file-loader' },
{ test: /\.cjsx$/, loaders: ['react-hot', 'coffee', 'cjsx']},
{ test: /\.coffee$/, loader: 'coffee' },
{ test: /\.jsx$|\.js$/, loader: 'jsx-loader?harmony' },
])
}
I'm requesting FontAwesome CSS like that:
require "../../styles/font-awesome.min.css";
font-awesome.min.css contains this:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
And for some reason, WebPack tries to parse .woff file with style-loader and gives me error:
ERROR in ./src/fonts/fontawesome-webfont.woff
Module parse failed: /var/www/app/src/fonts/fontawesome-webfont.woff Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./~/css-loader!./src/styles/font-awesome.min.css 2:73-117
I'm really lost right now. Any ideas?
Update:
I'm completely lost right now. I've decided to fool around with my config and put this line in loaders:
{ test: /\.eot$/, loader : 'file' },
And required this file:
require "../../fonts/fontawesome-webfont.eot";
Got error:
ERROR in ./src/fonts/fontawesome-webfont.eot
Module parse failed: /var/www/app/src/fonts/fontawesome-webfont.eot Line 2: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
However, when I tried to require my file like this:
require "file!../../fonts/fontawesome-webfont.eot";
Everything went smooth. Looks like webpack ignores my loaders?
it depends on the url used in css.
this error is releated to regex, try to change (\?[a-z0-9]+) to (\?v=[0-9]\.[0-9]\.[0-9]) or (\?[\s\S]+).
Example:
https://github.com/gowravshekar/font-awesome-webpack
module.exports = {
module: {
loaders: [
// the url-loader uses DataUrls.
// the file-loader emits files.
{ 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" }
]
}
};
https://github.com/shakacode/font-awesome-loader
module.exports = {
module: {
loaders: [
// 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"
loader: "url"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
loader: 'file'
},
]
}
};
The other day I add the font-awesome through the LESS source so basically
npm install --save less-loader
bower install --save components-font-awesome
Then I require font awesome like this
require('bower_components/components-font-awesome/less/font-awesome.less')
And finally in the webpack.config.js I add the loader modules
var path = require('path')
module.exports = {
...
, module: {
loaders: [
{test: /\.less$/, loader: "style!css!less"},
{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
}
};
I know that it not the same with .css but I believe that its easy this way. Hope it helps.