Задать вопрос
@kirillleogky

Как правильно подключить ExtractTextPlugin?

Структура проекта:
5e00b26528415891505795.png



Мой webpack конфиг:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
  rules: [
    {
      test: /\.js$/,
      enforce: 'pre',
      exclude: /node_modules/,
      loader: 'eslint-loader',
    },
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
      })
    },
  ],
 },
  plugins: [
    new HtmlWebpackPlugin({ template: 'src/index.html'})
  ]
};



simple-piskel-clone/src/index.js :
require('./styles/basic.scss');


simple-piskel-clone/src/index.html :
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Simple Piskel Clone</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>

<body>
    <h1>Hello There!</h1>
    <script src="main.js"></script>
</body>

</html>




Мне надо чтобы все файлы с расширением scss переводились в css и объединялись в один общий css файл.
Я установил
npm install style-loader css-loader sass-loader node-sass extract-text-webpack-plugin -D

И добавил в webpack конфиг:
{
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
      })
    },




НО вылазит ошибка:
5e00b3b1a0016490681566.png
Подскажите как её решить и чтобы результирующий css импортировался в simple-piskel-clone/src/index.js ?
  • Вопрос задан
  • 2904 просмотра
Подписаться 2 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 2
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
ExtractTextPlugin устарел и не работает с последними версиями webpack
используйте: https://www.npmjs.com/package/mini-css-extract-plugin
Ответ написан
Комментировать
@ned4ded
Верстка, Фронтенд
1. Вы забыли добавить инстанс самого плагина в массив plugins

plugins: [
    new HtmlWebpackPlugin({ template: 'src/index.html'}),
    new ExtractTextPlugin("styles.css")
  ]


В самом репозитории плагин помечен как deprecated, т.е. устаревший и неподдерживаемый. Воспользуйтесь, если есть такая возможность, плагином MiniCssExtractPlugin

2. "Подскажите как её решить и чтобы результирующий css импортировался в simple-piskel-clone/src/index.js ?"

Это невозможно, вебпак при импортировании стилей просто строит граф зависимостей и через HtmlWebpackPlugin добавляет линк на него в html файл. Т.е. вам нужно импортировать в js файл сам базовый .scss файл, тогда вебпак при бандле его распарсит по заданным условиям, скомпилирует в style.css и подгрузит его на страницу. Ну или если вы просто делаете сборку без HtmlWebpackPlugin, то вручную импортируйте собранный css в запрашиваемую клиентом страницу.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы