webpack sass-loader не разрешает URL - PullRequest
Новая
       64

webpack sass-loader не разрешает URL

0 голосов
/ 13 января 2020

Хотя css файлы разрешаются очень хорошо, в s css они просто не разрешаются. Кто-нибудь знает решение? Sass-loader говорит мне использовать 'resol-url-loader', но я не могу заставить его работать. Я пытаюсь добавить шрифт. Если я использую css версию, она работает просто отлично (с загрузчиком файлов, даже копирует шрифты в dist), но с s css no.

Вот мой файл конфигурации prod.

webpack.production. js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');

const plugins = [
  new HtmlWebpackPlugin({
    inject: false,
    hash: true,
    template: __dirname + '/../src/app/Views/layouts/layout-template.phtml',
    filename: __dirname + '/../src/app/Views/layouts/layout.phtml'
  }),
  new MiniCssExtractPlugin({
    filename: 'css/[name].css',
    chunkFilename: 'css/[name].css',
  }),
];

module.exports = () => ({
  output: {
    publicPath: '/dist/',
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserJSPlugin({
      terserOptions: {
        extractComments: 'all',
        compress: {
          drop_console: true
        }
      }
    }), new OptimizeCSSAssetsPlugin({})],
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader?',
          'postcss-loader',
          'resolve-url-loader',
          'sass-loader'
        ],
      }
    ]
  },
  plugins
});

Заранее спасибо. Приветствия

Ответы [ 2 ]

0 голосов
/ 14 января 2020

Я понял это. Мне нужно было уменьшить версию 'resol-url-loader' до 2 и добавить sourceMap в sass-loader. 

   {
    test: /\.(sa|sc|c)ss$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
      },
      'css-loader',
      'postcss-loader',
      'resolve-url-loader',
      'sass-loader?sourceMap'
    ],
  }
0 голосов
/ 14 января 2020

Этот конфиг работает со мной:

заменить эту часть объекта ? 

{
    test: /\.scss$/,
    use: [
           MiniCssExtractPlugin.loader, 
          {
            loader: 'css-loader',
          }, 
          {
            loader: 'resolve-url-loader'
          }, 
          {
            loader: 'sass-loader',
          } 
         ]
}
...