0

我在我的反应代码中插入 css 时遇到问题。问题是 webpack 没有解析 css 文件。我根据文档做了所有事情，但没有运气。也可能是我为此使用 django 1.9 的问题

文件结构：

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
4

1 回答 1

1

从错误消息来看，您似乎正试图将其包含./testings.css在文件static/js/envs.jsx中，因此 Webpack （可以理解）试图在以下位置找到该 CSS 文件static/js：

.../ static/js/testings.css不存在

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

于 2016-08-13T08:19:40.780 回答