2016-08-13 2 views
0

J'ai un problème en insérant css dans mon code de réaction. Le problème est que webpack ne résout pas les fichiers CSS. J'ai tout fait selon les docs, et pas de chance. pourrait aussi être question que j'utilise django 1.9 pour cetteConfiguration de Webpack, webpack ne résout pas (empaqueter en paquet) Fichiers css

Structure du fichier:

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

Voici ma config webpack:

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'] 
    } 
}; 

dépendances installées:

"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" 

Erreur 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 

J'ai essayé d'ajouter un point d'entrée:

css: './static/css' 

et maintenant les erreurs sont:

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 

Répondre

1

Des messages d'erreur, il semble que vous essayez d'inclure ./testings.css dans le fichier static/js/envs.jsx, donc Webpack est (naturellement) en essayant de trouver ce fichier CSS dans static/js:

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

Essayez plutôt d'inclure ../css/testings.css.

+0

pas de chance, juste une autre erreur msg: ** erreur dans la construction ./~/css-loader!./static/css/testings.css Module échoué: CssSyntaxError:/css-loader/Utilisateurs/ievgeniivdovenko/espace de travail/personnel/outil/node_modules/extrait-text-webpack-plugin/loader.js ** ici comment j'importe: 'var testing = require (" css! ../ css/testings.css "); ' – Ievgenii

+0

Cela suggère que votre CSS est défectueux, ce qui est un problème différent. – robertklep

+0

Je pensais aussi, mais ce fichier est vide (testings.css), si j'ajoute un simple css comme: 'a {background-color: #ddd; } '- même erreur – Ievgenii