Webpack: как получить относительный путь в css sourcemap - PullRequest
Новая
       49

Webpack: как получить относительный путь в css sourcemap

0 голосов
/ 16 октября 2018

Я использую mac, chrome 69, webpack 3.8.1, css-loader 1.0.0, style-loader 0.19.1

У меня css sourcemap настроен так в моей конфигурации webpack: 

test: /\.css$/,
use: [
  {
    loader: require.resolve('style-loader'),
    options: {
      sourceMap: true
    }
  },

  {
    loader: require.resolve('css-loader'),
    options: {
      importLoaders: 1,
      sourceMap: true
    },
  },

А в Chrome DevTool это выглядит так:

enter image description here

Вопрос в том, можно ли сократитьисходная карта должна быть относительно корневого пути моего проекта?

Так что вместо /Users/xunyang/workspace/myProject/src/index.css

я бы хотел, чтобы она отображалась как /src/index.css

С некоторымиэкспериментируя, похоже, что исходная карта css не зависит от исходной карты веб-пакета devtool, поэтому я предполагаю, что css-loader является наиболее вероятным местом для этого.

Обновление Мой publicPath - '/'и publicUrl это' '.Конфигурация берется непосредственно из Create-реагировать-приложение

1 Ответ

0 голосов
/ 17 октября 2018
Параметр

try convertToAbsoluteUrls : false вместе с

Преобразует относительные URL-адреса в абсолютные URL-адреса, когда включены исходные карты

Если convertToAbsoluteUrls и sourceMaps включены, относительные URL-адреса будут преобразованына абсолютные URL-адреса прямо перед вводом CSS на страницу.

Ссылка: https://webpack.js.org/loaders/style-loader/#converttoabsoluteurls

rules: [
      {
        test: /\.css$/,
        use: [
          { 
            loader: 'style-loader',
            options: {
              sourceMap: true,
              convertToAbsoluteUrls: false
            }
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
              convertToAbsoluteUrls: false
            }
          }
        ]
      }
    ]
...