Ievgenii Ievgenii - 3 months ago 36
Python Question

Webpack setup, webpack doesn't resolve(pack into bundle) css files

I have problem inserting css inside my react code. Problem is that webpack not resolving css files.
I did everything according to docs, and no luck. Also could be issue that i'm using django 1.9 for this

File structure:

webpack.config.js
static
├── bundles
│   └── reqct-25186f952a42614d1bdc.js
├── css
│   ├── tabs.css
│   └── testings.css
└── js
├── env_tab.js
├── envs.jsx
└── index.jsx


Here is my webpack config:

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {

entry: {
reqct: './static/js'
},

output: {
path: path.resolve('./static/bundles/'),
filename: "[name]-[hash].js"
},

plugins: [
new BundleTracker({
filename: './webpack-stats.json'
}),
new ExtractTextPlugin({
filename: "[name].css",
allChunks: true
})
],

module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
}
]
},

resolve: {
modulesDirectories: ['node_modules'],
extensions: ['', '.js', '.jsx', '.css']
}
};


Dependencies installed:

"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"jquery": "^3.1.0",
"react": "^15.3.0",
"react-dom": "^15.3.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-bundle-tracker": "0.0.93"


Error msg:

ERROR in ./static/js/envs.jsx
Module not found: Error: Cannot resolve 'file' or 'directory' ./testings.css in /Users/ievgeniivdovenko/workspace/personal/tool/static/js
resolve file
/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css doesn't exist
/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css.js doesn't exist
/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css.jsx doesn't exist
/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css.css doesn't exist
resolve directory
/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css doesn't exist (directory default file)
/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css/package.json doesn't exist (directory description file)
[/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css]
[/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css.js]
[/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css.jsx]
[/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css.css]
@ ./static/js/envs.jsx 6:14-43


I tried to add one more entry point:

css: './static/css'


and now errors are:

ERROR in Entry module not found: Error: Cannot resolve directory './static/css' in /Users/ievgeniivdovenko/workspace/personal/tool
resolve directory ./static/css in /Users/ievgeniivdovenko/workspace/personal/tool
/Users/ievgeniivdovenko/workspace/personal/tool/static/css/package.json doesn't exist (directory description file)
directory default file index
resolve file index in /Users/ievgeniivdovenko/workspace/personal/tool/static/css
/Users/ievgeniivdovenko/workspace/personal/tool/static/css/index doesn't exist
/Users/ievgeniivdovenko/workspace/personal/tool/static/css/index.js doesn't exist
/Users/ievgeniivdovenko/workspace/personal/tool/static/css/index.jsx doesn't exist
/Users/ievgeniivdovenko/workspace/personal/tool/static/css/index.css doesn't exist

ERROR in ./static/js/envs.jsx
Module not found: Error: Cannot resolve 'file' or 'directory' ./testings.css in /Users/ievgeniivdovenko/workspace/personal/tool/static/js
resolve file
/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css doesn't exist
/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css.js doesn't exist
/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css.jsx doesn't exist
/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css.css doesn't exist
resolve directory
/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css doesn't exist (directory default file)
/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css/package.json doesn't exist (directory description file)
[/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css]
[/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css.js]
[/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css.jsx]
[/Users/ievgeniivdovenko/workspace/personal/tool/static/js/testings.css.css]
@ ./static/js/envs.jsx 6:14-43

Answer

From the error messages, it looks like you're trying to include ./testings.css in the file static/js/envs.jsx, so Webpack is (understandably) trying to find that CSS file in static/js:

.../static/js/testings.css doesn't exist

Try including ../css/testings.css instead.