How to properly connect ExtractTextPlugin?

K

kirillleogky2019-12-23 15:32:40

JavaScript

kirillleogky, 2019-12-23 15:32:40

Project structure:

My webpack config:

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 : simple-piskel-clone/src/index.html :
require('./styles/basic.scss');

<!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>

I need all files with the scss extension to be converted to css and combined into one common css file.
I have installed

npm install style-loader css-loader sass-loader node-sass extract-text-webpack-plugin -D

And added config to webpack:

{
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
      })
    },

BUT an error pops up:

Tell me how to solve it and so that the resulting css is imported into simple-piskel-clone/src/index.js ?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

D

Dmitry Belyaev, 2019-12-23
@bingo347

ExtractTextPlugin is deprecated and doesn't work with latest versions of webpack
use: https://www.npmjs.com/package/mini-css-extract-plugin

N

ned4ded, 2019-12-23
@ned4ded

1. You forgot to add the plugin instance to the plugins array

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

In the repository itself, the plugin is marked as deprecated, i.e. outdated and unsupported. Use, if possible, the MiniCssExtractPlugin
2 plugin. "Tell me how to solve it and get the resulting css imported into simple-piskel-clone/src/index.js ?"
This is not possible, when importing styles, webpack simply builds a dependency graph and adds a link to it in the html file via HtmlWebpackPlugin. Those. you need to import the base .scss file itself into the js file, then the webpack will parse it according to the specified conditions when bundled, compile it into style.css and load it on the page. Well, or if you are just building without HtmlWebpackPlugin, then manually import the collected css into the page requested by the client.