загрузчик стиля webpack и загрузчик css не работают для простого примера - PullRequest
Новая
       52

загрузчик стиля webpack и загрузчик css не работают для простого примера

0 голосов
/ 26 августа 2018

Я пытаюсь следовать этому уроку https://webpack.js.org/guides/asset-management/, однако я не могу загрузить файл css. (текст никогда не бывает красным)

https://github.com/bryandellinger/webpackassetmanagement

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

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'
             ]
           }
         ]
       }
    };

package.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"
  }
}

index.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(

));

style.css 

.hello {
    color: red;
  }

index.html 

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

Ответы [ 2 ]

0 голосов
/ 26 августа 2018

Вам необходимо импортировать файл CSS в ваш основной файл index.js.Вы можете сделать это, добавив @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());
0 голосов
/ 26 августа 2018

То, что вы забыли сделать, это импортировать style.css в ваш index.js, Webpack не будет знать о вашем style.css, если вы не скажете Webpack, что он там есть.

Затем он соберет весь CSS из импортированных вами файлов .css, превратит его в строку и передаст style-loader, который выведет его как <style> в <head> из ваш index.html.

Поскольку вы не импортировали style.css в точку входа, Webpack не знает об этом, css-loader не может собрать CSS с него, а style-loader не доходит до вывода это как <style>.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...