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!
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'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';
I am new to react and i have a project in which i am using bootstrap for css but now i want to load that css and js file from webpack.. I don't know how to load bootstrap files from webpack and how to write the config file of webpack but then also i have tried to load by searching about it..
here is my config file
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './index.js',
output: { filename: 'bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
]
},
};
Please tell me any solution how do i do that?
Thanks a lot in advance.
And what do i import in my index.js file?
i just have my routes there..
import ReactDOM from "react-dom";
ReactDOM.render(
routes ,
document.getElementById("crm")
);
This is one option using Webpack 2 and HtmlWebpackPlugin / ExtractTextPlugin.
Add import './style.css'; (or wherever they are) to your react index.js (Where it says style you could also put bootstrap.min.css and/or other files.
Same for the js files import './jquery.js'; and import './bootstrap.js';.
The stylesheet Link/href will be injected in your index.html and the output css file(s) put in the dist (output.path) dir. The js files will be injected in your bundle.js (check CommonsChunkPlugin (link) to output these and other files in separate .js files.
output.publicPatch is important to make it not only work when index.html is requested directly but also via a route. This makes sure the link to css is added as /style.css not just style.css in index.html.
webpack.config:
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
const config = {
entry: {
bundle: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/', <- used by HtmlWebpackPlugin
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
}),
new ExtractTextPlugin("styles.css")
]
}
module.exports = config;
Hope this helps. Let me know.
I'm using the tutorial here as a base, but I haven't any examples of how to import css files into an app. I've found bits and pieces but not enough to know how to do it. I've added "import styles from './styles/main.css';" into App.jsx and my webpack config is below.
var css = require("css!./main.css");
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: "style!css!"
}
]
}
}
module.exports = config;`
I get the error:
./styles/main.css
Module parse failed: C:\Projects\reactApp\styles\main.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:5)
That file only has div {} right now.
In your webpack config you only need to add style-loader and css-loader (you need to npm install it first):
{ test: /\.css$/, loader: 'style-loader!css-loader' },
Then you can require the CSS in your .js files (components):
require('./styles/main.css');
I want to compress CSS file from Material Design Lite, but Webpack doesn't see material.css file if I import it like this:
import 'material-design-lite';
But when I tried to import directly material.css like this:
import 'material-design-lite/material.css';
then I've got:
ERROR in ./~/material-design-lite/material.css
Module parse failed: /p/prod/node_modules/material-design-lite/material.css Unexpected character '#' (8:0)
Here is my Webpack conf file webpack.base.js:
var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var cssPath = path.join(__dirname, 'assets/css');
module.exports = {
context: __dirname,
entry: './assets/js/index',
output: {
path: path.resolve('./assets/bundles/'),
filename: "[name]-[hash].js"
},
plugins: [
new ExtractTextPlugin("[name]-[hash].css")
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'],
}, {
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
}
],
},
resolve: {
modulesDirectories: ['node_modules', cssPath],
extensions: ['', '.js', '.jsx', '.css']
},
}
Anyone has an idea what I did wrong?
The problem is that you are ignoring node_modules for your style and css loading - and the css file is in node_modules