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
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
Cela suggère que votre CSS est défectueux, ce qui est un problème différent. – robertklep
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