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'),
}
....
]}
Related
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'
}
]
})
}
I'm trying to process multiple SCSS files into a single external CSS file in Webpack (3.6.0) except I'm encountering issues around the parsing of the #import statements.
Entry index.js contains:
import './styles/main.scss';
Entry SCSS:
#import 'reset.scss';
#import 'global.scss';
#import 'fonts.scss';
#import 'system.scss';
Current webpack:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js'
},
context: path.resolve(__dirname),
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
},
plugins: [
new CleanWebpackPlugin(['app']),
new HtmlWebpackPlugin({
title: 'Minimum-Viable',
filename: 'index.html',
template: './public/index.html',
}),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'es2015',
'react',
],
plugins: ['transform-class-properties'],
},
},
},
{
test: /\.scss$/,
include: [
path.resolve(__dirname, 'styles')
],
use: [
{loader:'style-loader'},
{loader:'css-loader'},
{loader:'sass-loader'}
]
},
],
},
resolve: {
extensions: ['.js','.scss']
}
};
The Error being thrown is:
ERROR in ./src/styles/main.scss Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type. | #import 'reset.scss';
Any pointers gratefully received.
I managed to reproduce the error and it seems to come from:
include: [
path.resolve(__dirname, 'styles')
],
The path is the issue cause the loader searches for /styles in ./styles but looking at your entry point:
entry: {
app: './src/index.js'
},
It should actually be ./src/styles so:
include: [
path.resolve(__dirname, 'src', 'styles')
],
with:
include: [
path.resolve(__dirname, 'styles')
],
you are instructing webpack to use your loader chain only on files residing in your styles folder.
reset.scss looks like a node dependency usually stored in your node_module, which is excluded from SASS processing by the include option.
Try to remove your SASS include option or to extend it in order to include node_folder or the specific module imported by your styles.
I basically have the same config as you, except for two things:
{
test: /\.scss$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader", "sass-loader"]
}
If your webpack is in a different folder compared to your project root, __dirname may not work out for you. You might need to remove that statement all together or change it to process.cwd(). I can give you another hint and that may be that you are missing the node-sass package. Secondly, you are probably not using the right syntax for webpack version 2 or 3 as shown in the use key.
Have you tried Extract text webpack plugin
https://github.com/webpack-contrib/extract-text-webpack-plugin
Basically it will collect all of your styles files(imported in your code) and pack it to bundled css which you can then just link to your html.
Did you try this way?
index.js:
import './styles/main.scss';
import './styles/reset.scss';
import './styles/global.scss';
import './styles/fonts.scss';
import './styles/system.scss';
Being a newbie to Webpack, I'm following the discussion: Recomended way to require CSS in webpack by:
Configuring my Webpack configurations with
{
test: /(\.css|\.scss)$/,
loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap'],
},
Requiring css files in my code:
require('./style1.css');
require('./style2.css');
But the two css files above will not be bundled together. How to instruct Webpack to bundle all required css files?
By default webpack will not bundle your css, it will create inline style tag in HTML and place your css there. For extract all your css and bundle into one css file you nee extract text plugin
for webpack 2
npm install --save-dev extract-text-webpack-plugin
for webpack 1
npm install --save-dev extract-text-webpack-plugin#1.0.1
In webpack 2
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
Webpack 1
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
]
},
plugins: [
new ExtractTextPlugin("styles.css")
]
}
Read more https://github.com/webpack-contrib/extract-text-webpack-plugin
As I saw in your Webpack configuration entires, you are instructing Webpack to bundle your css files inject then as inline css by using css-loader and style-loader.The css-loader takes a CSS file and reads off all its dependencies whilst the style-loader will embed those styles directly into the markup as tag in the of the document.
Personally, just to keep things clean, I’d prefer to have a separate CSS file rather than adding all the code inline. To do that we’ll need to use a Webpack plugin called extract-text-webpack-plugin which moves every require('style.css') in entry chunks into a separate css output file. We have to install that with npm:
for webpack 2
npm install --save-dev extract-text-webpack-plugin
for webpack 1
npm install --save-dev extract-text-webpack-plugin#1.0.1
Now we can update our webpack.config.js file again by requiring it and placing our CSS loader into it:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src',
output: {
path: 'build',
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js/,
loader: 'babel',
include: __dirname + '/src',
},
{
test: /\.css/,
loader: ExtractTextPlugin.extract("css")
}
],
},
plugins: [
new ExtractTextPlugin("styles.css")
]
};
it then creates a styles.css file for us! We can now add this stylesheet file in the
<link rel="stylesheet" href="build/styles.css">
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 strugling to import a css file with webpack. I keep getting this error:
ERROR in ./index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../style/style.css in c:\developement\prja/app
# ./index.js 11:0-29
I tried all sorts of path for the style.css. like 'css!../style/style.css', '/style/style.css' or './style/style.css' but none of them works. I also tried to use require instead of import. But I keep getting the same error message.
Any ideas?
My index.js entry point file looks like this:
import 'expose?$!expose?jQuery!jquery';
import angular from 'angular';
import 'bootstrap-webpack';
import '../style/style.css';
var ngModule = angular.module('app', []);
An this is my webpack.config.js:
module.exports = {
context: __dirname + '/app',
entry: './index.js',
output: {
path: __dirname + '/app',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{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'}
]
}
};
And this is my file sctructure:
| lighthouse.iml
| package.json
| webpack.config.js
|
+---app
| index.html
| index.js
|
\---style
style.css
Your problem related to context property and you file structure.
context - The base directory (absolute path!) for resolving the entry option, webpack docs. In other words, this is the folder where webpack starts looking into your app. Here is two way how to fix it:
Remove /app from context property -> context: __dirname or you can even remove context from your weblack.config file
Move your style folder into app folder
Thanks!