Webpack设置,webpack不能解析(打包)css文件

问题描述:

我在我的反应代码中插入css时出现问题。问题在于webpack无法解析css文件。 我根据文档做了一切,没有运气。也可能是因为我使用的Django 1.9本Webpack设置,webpack不能解析(打包)css文件

文件结构的问题:

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

这里是我的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'] 
    } 
}; 

依赖关系:

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

我尝试添加一个条目点:

css: './static/css' 

,现在的错误是:

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 

从错误信息,它看起来像你想包括./testings.css在文件中static/js/envs.jsx,所以Webpack是(可以理解)试图找到该文件中的static/js

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

尝试包括../css/testings.css

+0

没有运气,只是一个错误信息: **错误在./~/css-loader!./static/css/testings.css 模块构建失败:CssSyntaxError:/ CSS-装载机/用户/ ievgeniivdovenko /工作区/个人/工具/ node_modules/extract-text-webpack-plugin/loader.js ** 这里我如何导入: var testing = require(“css!../ css/testings.css”); ' – Ievgenii

+0

这表明你的CSS有问题,这是一个不同的问题。 – robertklep

+0

我也这么认为,但是这个文件是空的(testings.css),如果我添加一些简单的CSS如:'a {background-color:#ddd; }' - 同样的错误 – Ievgenii