0

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
Ievgenii
  • 3
  • 1
  • 2

1 Answers1

1

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.

robertklep
  • 198,204
  • 35
  • 394
  • 381
  • no luck, just another error msg: **ERROR in ./~/css-loader!./static/css/testings.css Module build failed: CssSyntaxError: /css-loader!/Users/ievgeniivdovenko/workspace/personal/tool/node_modules/extract-text-webpack-plugin/loader.js** here how i import: `var testing = require("css!../css/testings.css");` – Ievgenii Aug 13 '16 at 08:35
  • That suggests that your CSS is faulty, which is a different issue. – robertklep Aug 13 '16 at 08:36
  • i also thought so, but this file is empty(testings.css), if i add some simple css like: `a { background-color: #ddd; }` - same error – Ievgenii Aug 13 '16 at 08:42
  • If you're configuring a loader for CSS files in your Webpack config, you probably shouldn't declare a loader in the `require` statement: `require('../css/testings.css')`. – robertklep Aug 13 '16 at 08:57
  • without declaring in require i have another error: `78% additional chunk assetsTypeError: path.replace is not a function` – Ievgenii Aug 13 '16 at 09:13
  • 1
    Try `new ExtractTextPlugin('[name].css', { allChunks: true })` – robertklep Aug 13 '16 at 09:24