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
。
没有运气,只是一个错误信息: **错误在./~/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
这表明你的CSS有问题,这是一个不同的问题。 – robertklep
我也这么认为,但是这个文件是空的(testings.css),如果我添加一些简单的CSS如:'a {background-color:#ddd; }' - 同样的错误 – Ievgenii