Question

尝试使用css-loader添加css时，webpack对我不起作用。

os：Windows 10专业版， webpack：4.8.0 节点：8.9.4 npm：6.0.0 css-loader：0.28.11 style-loader：0.21.0

的package.json

  {
      "name": "webpack-dev",
      "version": "1.0.0",
      "description": "",
      "main": "index.php",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "./src/app.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.6.1",
        "css-loader": "^0.28.11",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^1.1.11",
        "node-sass": "^4.9.0",
        "raw-loader": "^0.5.1",
        "sass-loader": "^7.0.1",
        "style-loader": "^0.21.0",
        "url-loader": "^1.0.1",
        "webpack": "^4.8.1",
        "webpack-cli": "^2.1.3"
      }
    }

app.js

require('./style.css');
require('./scripts.js');

错误消息

Version: webpack 4.8.1
Time: 2157ms
Built at: 2018-05-09 14:13:17
    Asset      Size  Chunks             Chunk Names
bundle.js  3.68 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/app.js] 48 bytes {main} [built]
[./src/scripts.js] 28 bytes {main} [built]
[./src/style.css] 222 bytes {main} [built] [failed] [1 error]

ERROR in ./src/style.css
Module build failed: Unknown word (2:1)

  1 |
> 2 | var content = require("!!./style.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];
  5 |

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

的style.css

body {
  color: red;
}

我只使用命令webpack，每次都失败。这是迄今为止最令人沮丧的工具。没有任何作用，除非我将!!放在require语句前面，即require(!!'./style.css')

我已经阅读了关于我可以在npm，stackoverflow等等上找到的每个错误报告，但似乎没有任何指向我的问题。我完全按照webpack模块部分的说明进行操作，但它仍然无法正常工作。请帮助！

编辑：忘记了配置文件

const webpack = require('webpack')
const path = require('path')

const config = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(s*)css$/,
        use: [
          'sass-loader',
          'css-loader',
          'style-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: [
          'babel-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
};
module.exports = config;

Answer 1

在webpack中，当您在规则中列出多个加载器时，它们将从右到左进行评估（在您的情况下，从下到上），因此您的scss规则应为：

  {
    test: /\.(s*)css$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader'
    ]
  }

原因是首先，你希望你的sass编译成css，然后css将通过style-loader在你的html文件中内联。

另外，如果你没有使用sass，你可以删除sass-loader。

Answer 2

在我的Web Pack项目中检查这些问题是否遇到了类似的问题您必须检查Web Pack规则：

{
    test: /\.(s*)css$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader'
    ]
  }

上面，更新了它将处理我们的sass或CSS文件的规则。测试是test：/.(s*)css$/：这意味着任何名称与正则表达式/.(s*)css$/i.e匹配的文件。 .scss或.css

应使用use数组中指定的一系列加载程序进行编译，即['style-loader'，'css-loader'，'sass-loader']。

此规则将sass-loader的输出链接到css-loader。 css-loader将采用sass-loader的css输出，还将处理我们应用程序中具有的任何其他.css文件，并将.css传递给style-loader，然后将css代码放入标记中在我们的index.html中，它从下到上工作。

webpack失败＆＃34;模块构建失败：未知单词＆＃34;使用webpack.config.js文件

2 个答案: