Сборка webpack + sass

120
05 марта 2021, 16:50

Не могу подключить в конфиг webpack сборку scss файлов в css файл. Подскажите, пож-ста, в чём ошибка, вот webpack.config:

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  mode: 'development',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.resolve('./src/index.js'),
    './src/scss/style.scss'
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.(sass|scss)$/,
        include: path.resolve(__dirname, 'src/scss'),
        use: ExtractTextPlugin.extract({
          use: [{
              loader: "css-loader",
              options: {
                sourceMap: true,
                minimize: true,
                url: false
              }
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true
              }
            }
          ]
        })
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    hot: true,
    proxy: {
      '/api': {
        target: 'http://frontend-study.simbirsoft:8085/',
        changeOrigin: true,
        secure: false,
        logLevel: 'debug'
      }
    }
  }
};
Answer 1

Плагин extract-text-plugin deprecated.
Воспользуйтесь, например, MiniCssExtractPlugin:

{
  test: /\.s?css$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'resolve-url-loader',
    'sass-loader'
  ]
}
READ ALSO
Не подключается СSS

Не подключается СSS

у меня возникла такая проблема - есть файлы styleForLabacss, program

157
Смена фото на карточке товара при ховере [закрыт]

Смена фото на карточке товара при ховере [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме

98
Почему возвращает [object Object]?

Почему возвращает [object Object]?

Ситуация, казалось, простая, но я окончательно запуталсяСуть в том, что надо каждому элементу добавить id значение которого = атрибуту value

76