title: webpack fails "module build failed: unknown word" with webpack.config.js file
body: <p>webpack does not work for me when trying to add css using the css-loader. </p>
  
  <p>os: Windows 10 pro,
  webpack: 4.8.0
  node: 8.9.4
  npm: 6.0.0
  css-loader: 0.28.11
  style-loader: 0.21.0</p>
  
  <p>package.json</p>
  
  <pre><code>  {
        "name": "webpack-dev",
        "version": "1.0.0",
        "description": "",
        "main": "index.php",
        "scripts": {
          "test": "echo \"Error: no test specified\" &amp;&amp; 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"
        }
      }
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>require('./style.css');
  require('./scripts.js');
  </code></pre>
  
  <p>Error Message</p>
  
  <pre><code>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 |
  &gt; 2 | var content = require("!!./style.css");
      | ^
    3 |
    4 | if(typeof content === 'string') content = [[module.id, content, '']];
    5 |
  
   @ ./src/app.js 1:0-22
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>body {
    color: red;
  }
  </code></pre>
  
  <p>I just use the command <code>webpack</code> and it fails every time. This is the most frustrating tool ever. Nothing works except for if I put <code>!!</code> in front of the require statement i.e. <code>require(!!'./style.css')</code></p>
  
  <p>I have read every bug report about this I can find on npm, stackoverflow, etc., etc. but nothing seems to point to my problem. I literally followed the instructions verbatim from the modules section of webpack and it still isn't working. PLEASE HELP!</p>
  
  <p>edit: forgot the config file</p>
  
  <pre><code>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;
  </code></pre>
  
  <h3>Answer</h3>
  
  <p>Turns out order is important</p>
  
  <pre><code>...
  
  use: [
      "style-loader",
      "css-loader",
      "sass-loader"
  ]
  
  ...
  </code></pre>