webpack 样式加载器和 css 加载器不适用于简单示例

Question

webpack 样式加载器和 css 加载器不适用于简单示例

Bry*_*ger 3 javascript webpack webpack-style-loader css-loader

我试图按照这里的教程https://webpack.js.org/guides/asset-management/ 但是我永远无法加载 css 文件。（文字从不红色）

https://github.com/bryandellinger/webpackassetmanagement

> --dist
> ----bundle.js
> ----index.html
> --src
> ----index.js
> ----style.css

Run Code Online (Sandbox Code Playgroud)

webpack.config.js

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

Run Code Online (Sandbox Code Playgroud)

包.json

{
  "name": "webpack1",
  "version": "1.0.0",
  "description": "webpack tutorial",
  "private": true,
  "scripts": {
    "dev": "lite-server",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "style-loader": "^0.22.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "lite-server": "^2.4.0",
    "lodash": "^4.17.10"
  }
}

Run Code Online (Sandbox Code Playgroud)

索引.js

    import _ from 'lodash';

    function component() {
        let element = document.createElement('div');

        // Lodash, currently included via a script, is required for this line to work
        element.innerHTML = _.join(['Hello', 'webpack'], ' ');
        element.classList.add('hello'); 
        return element;
      }

      document.body.appendChild(component(

));

Run Code Online (Sandbox Code Playgroud)

样式文件

.hello {
    color: red;
  }

Run Code Online (Sandbox Code Playgroud)

索引.html

<!doctype html>
<html>
  <head>
    <title>Asset Management</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Win*_*Win 6

您需要在主 index.js 文件中导入 css 文件。您可以通过添加来做到这一点import './style.css';

更新了 index.js

import _ from 'lodash';
import './style.css';

function component() {
  let element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');
  return element;
}

document.body.appendChild(component());

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年前
查看次数：	8115 次
最近记录：	4 年，7 月前