webpack fehl „- Modul build failed: unknown word“ mit webpack.config.js Datei

webpack nicht für mich arbeiten, wenn Sie versuchen, um css mit dem css-loader.

os: Windows 10 pro,
webpack: 4.8.0
Knoten: 8.9.4
npm: 6.0.0
css-loader: 0.28.11
Stil-loader: 0.21.0

Paket.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');

Fehlermeldung

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

Stil.css

body {
  color: red;
}

Benutze ich einfach den Befehl webpack und es scheitert jedes mal. Dies ist die am meisten frustrierend tool überhaupt. Nichts funktioniert, außer wenn ich !! vor dem require-Anweisung, d.h. require(!!'./style.css')

Habe ich gelesen, jeden bug-report über das ich finden kann, npm, stackoverflow, etc., etc. aber nichts scheint zu meinem problem. Ich habe buchstäblich befolgt die Anweisungen wörtlich aus der modules-Sektion von webpack und es immer noch nicht funktioniert. BITTE UM HILFE!!

edit: habe vergessen die config-Datei

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;

Antwort

Stellt sich heraus, die Reihenfolge ist wichtig

...

use: [
    "style-loader",
    "css-loader",
    "sass-loader"
]

...
  • Hallo, können Sie auch posten Sie Ihre webpack.config.js Datei?
  • Nur zugegeben, es ich danke Ihnen für die Beantwortung so schnell
  • GELÖST mein problem hier war, dass die Lader waren in der falschen Reihenfolge, das ist unglaublich wichtig, so scheint es.
  • Dank rochin Sie entlastet mich mit den nervigen, mysteriöse Fehler, das ist offensichtlich! Gute Arbeit.
  • warum hast du nicht die Frage beantworten, mit der scheinbar richtigen Reihenfolge?
  • Hinzugefügt eine Antwort

InformationsquelleAutor rochin | 2018-05-09



2 Replies
  1. 3

    Im webpack, wenn Sie mehrere Lader innerhalb einer Regel ausgewertet werden, von rechts nach Links (in deinem Fall von unten nach oben), so dass Ihre scss Regel sollte sein:

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

    Der Grund ist Erstens, dass Sie wollen, dass Ihr sass kompilieren zu css, und dann die css werden inline in der html-Datei über das style-loader.

    Auch, wenn Sie nicht mit sass, Sie können entfernen Sie die sass-loader.

  2. 0

    Haben, prüfen Sie diese Probleme immer ähnlicher Probleme in meinem web-pack-Projekt
    Sie haben zu prüfen, das web-pack Regel :

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

    Oben aktualisiert, die in der Regel behandeln unsere sass oder CSS-Dateien.
    Der test ist test: /.(s*)css -$/: das bedeutet, dass eine Datei mit dem Namen matching mit regulären Ausdruck /.(s*)css$/dh .scss oder .css

    Es sollte gesammelt werden, mit der Kette der Lader angegeben, der Arrays verwendet, d.h. [’style-loader‘, ‚css-loader‘, ’sass-loader‘].

    Diese Regel Kette die Ausgabe von sass-loader css-loader. css-loader nehmen diese css-Ausgabe des sass-loader und auch alle anderen .css-Dateien haben wir in unserem Antrag und pass auf die .css-loader, der dann die Arbeit machen, indem ich die css-codes inside-tags in der index.html Es funktioniert von unten nach oben..

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.