Question

我正在尝试运行命令npm run build，但它无效。我收到以下错误：

> typescript@1.0.0 build /Users/Prashant/Code/typescript
> webpack

Hash: c6dbd1eb3357da70ca81
Version: webpack 3.2.0
Time: 477ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.89 kB       0  [emitted]  main
   [0] ./src/index.js 51 bytes {0} [built]
   [1] ./src/index.css 290 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.css
Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!./index.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // Prepare cssTransformation
  7 | var transform;
  8 |


@ ./src/index.js 1:0-22

我的网络包配置文件（webpack.config.js）是：

var path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'css-loader',
                    'style-loader'
                ]
            }
        ]
    }
};

我的CSS文件（index.css）是

body {
    color:red;
}

我的js文件index.js如下：

require("./index.css");
alert('this is my alert');

我正在尝试运行该文件，但它无法正常工作我已经检查了所有拼写也尝试添加了很多其他CSS但是它无法正常工作，请你帮我解决这个问题？

Answer 1

加载器以相反的顺序应用。这意味着您首先应用style-loader，然后将其结果传递给css-loader。 style-loader的输出是JavaScript，它会将样式插入<style>标记，但css-loader需要CSS并且无法解析JavaScript，因为它不是有效的CSS。

正确的规则是：

{
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ]
}

Answer 2

我通过在js文件的同一目录中创建style.css文件来解决了这个问题

Answer 3

我遇到了同样的问题，最终发现webpack配置中有第二个模块规则处理* .css文件

找不到模块：错误：无法解析＆＃39; ./ style.css＆＃39;在目录？

3 个答案: