Webpack HtmlWebpackPlugin не внедряет CSS после процесса сборки - PullRequest
Новая
       84

Webpack HtmlWebpackPlugin не внедряет CSS после процесса сборки

0 голосов
/ 26 марта 2020

Я создаю веб-сайт с помощью Webpack, но, как видно из заголовка, я не могу заставить HtmlWebpackPlugin вставить правильную ссылку css в тег head, когда я запускаю команду "npm run-script build". Пакет. js, однако, обрабатывается правильно, и в его конец вводится правильный тег сценария. Вот мой конфиг. js: 

const autoprefixer = require('autoprefixer');
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: "development",
  entry: ['./src/scss/app.scss', './src/js/app.js'],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/template.html",
      inject: true
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css',
            },
          },
          {loader: 'extract-loader'},
          {loader: 'css-loader'},
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()]
            }
          },
          {
            loader: 'sass-loader',
            options: { 
              // Prefer Dart Sass
              implementation: require('sass'),
              sassOptions: {
                includePaths: ['./node_modules'],
              },
            },
          }
        ],
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['@babel/preset-env'],
        },
      },
      {
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test: /\.(png|jpg|svg)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name].[ext]",
            outputPath: "imgs"
          }
        }
      }
    ],
  },
};

Поскольку я использую компоненты материалов для Интернета, все правила, которые вы видите, кроме html -loader и файла -Loader есть, потому что я следовал этому руководству, чтобы использовать Material Design с Webpack: https://material.io/develop/web/docs/getting-started/#using -md c -web-with-sass-and-es2015

Что я скучаю?

...