webentwicklung-frage-antwort-db.com.de

Webpack 4 mit sass-loader & resolur-url-loader - Bildpfade wurden nicht gefunden

Minimal reproduzierbare Einstellung hier: https://github.com/jamesopti/webpack_playground/tree/resolve_url_loader_issue

Ich versuche, resolve-url-loader zu verwenden, um einen Hash-Namen in meine scss url()-Bildpfade einzufügen, aber ich habe eine verdammte Zeit damit, es mit Webpack 4 zu arbeiten. Ich habe eine Reihe von Bildern in /static/img/**, auf die in meinem SCSS verwiesen wird:

span.arrow {
  background: url(/static/img/audiences.png);
}

Was in meinem CSS als genau das gleiche endet (resol-url-loader findet sie nicht)

Wenn ich die folgende Konfiguration über Webpack ausführe, sehe ich, dass das Auflösungsprogramm das richtige url() und seinen Pfad findet, aber der Debug-Modus sagt NICHT GEFUNDEN.

resolve-url-loader: /static/img/audiences.png
  /Users/usr1/webpack_playground/src
  /Users/usr1/webpack_playground/static/img
  NOT FOUND

Gibt es eine Ausgabekonfiguration, die nicht korrekt ist? Ich habe verschiedene Kombinationen der Einstellungen ohne Erfolg ausprobiert:

  loader: 'resolve-url-loader',
  options: {
    debug: true,
    root: path.join(__dirname, './static/img'),
    includeRoot: true,
    absolute: true,
  },

Mein Endziel ist, dass File-Loader sie in die/dist-Hash-Version umwandelt:

span.arrow {
  background: url(/static/img/audiences-dhsye47djs82kdhe6.png);
}

// Webpack-Regelkonfiguration

rules: [
      {
        test: /\.(png|jpg|gif)$/,
        include: [
          path.resolve(__dirname, './static/img'),
        ],
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      },
      {
        test: /\.svg$/,
        use: {
          loader: 'svg-inline-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      },
      { test: /\/src\/js\/(?:.*)\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] },
      {
        test: [/\.scss$/, /\.sass$/],
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'resolve-url-loader',
            options: {
              debug: true,
              root: './static/img',
              includeRoot: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              outputStyle: 'compressed',
              sourceMap: true,
              includePaths: [
                './src'
              ],
            },
          },
        ],
      },
]
7
jamis0n

Es stellte sich heraus, dass alles was ich brauchte, file-loader war.

Wenn ein Bild (das meinen angegebenen Dateierweiterungen entspricht) von einem der css/sass/style-Ladeprogramme gefunden wird, wird es durch file-loader verarbeitet, das es in das Ausgabeverzeichnis kopiert, das mit dem angegebenen Namensformat angegeben wurde, und den Namen für das sass-Ladeprogramm zurückgibt als Dateiname verwenden.

rules: [
  {
    test: /\.(png|jpg|gif|svg)$/,
    exclude: [
      path.resolve(__dirname, './node_modules'),
    ],
    use: {
      loader: 'file-loader',
      options: {
        name: '[path][name]-[hash].[ext]',
        outputPath: '../',
        publicPath: '/dist',
      },
    },
  },
  {
    test: /\.svg$/,
    include: [
      path.resolve(__dirname, './node_modules'),
    ],
    use: {
      loader: 'svg-inline-loader',
      options: {
        name: '[name]-[hash].[ext]',
      },
    },
  },
  { test: /\/src\/js\/(?:.*)\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] },
  {
    test: [/\.scss$/, /\.sass$/],
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          root: path.resolve(__dirname),
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: () => [
            autoprefixer({
              'browsers': ['last 2 versions', 'ie >= 10'],
            }),
          ],
          sourceMap: true,
        },
      },
      {
        loader: 'sass-loader',
        options: {
          outputStyle: 'compressed',
          sourceMap: true,
          includePaths: [
            './src/scss',
          ],
        },
      },
    ],
  },
  {
    test: /\.html$/,
    use: [
      {
        loader: 'html-loader',
        options: {
          root: path.resolve(__dirname),
        },
      },
    ],
  },
  {
    test: [
      /\/bundles\/(?:.*)\.js$/,
    ],
    use: {
      loader: 'babel-loader',
    },
  },
];
0
jamis0n

Ich hatte das gleiche Problem. Ich glaube, Sie benötigenurl-loader, um die Bilder ordnungsgemäß mit Webpack 4 zu laden. Dieses Setup hat für mich funktioniert:

rules: [
    {
        test: /\.(png|jpg)$/,
        loader: "url-loader",
    }, {        
        test: /\.(scss|css)$/,
        use: [
            "style-loader",
            "css-loader",
            "sass-loader",
        ]
    }
]
0
skepticscript

Tatsächlich wird das Auflösen von URL-Ladevorgängen immer noch benötigt , manchmal . Dies hängt davon ab, ob Sie url () -Aufrufe aus Dateien auflösen möchten, die in das importiert wurden sass compilation. Ohne sie wären in diesem Fall URLs kaputt.

Wenn Sie jedoch nicht den Mehrfach-Datei-SCSS-Build verwenden (zum Beispiel, wenn jede Komponente nur eine lokale SCSS-Datei enthält, ohne den SCSS-Code einer gemeinsam genutzten Bibliothek oder Teile einer Art aufzurufen), benötigen Sie nicht resolve-url- Lader.

Natürlich benötigen Sie weiterhin einen URL-Loader (umschließt den File-Loder mit Inlining-Fähigkeiten) oder einen File-Loader (um Assets direkt in den Dist-Ordner zu kopieren).

beim Auflösen des URL-Laders werden Originaldateien aus der von sass ausgegebenen Quellkarte überarbeitet, und bei der Arbeit mit der Dart-sass-Implementierung treten bei sass-loader Probleme mit den Quellkarten auf. In diesem Fall würden Quellkartenquellen fälschlicherweise anstelle des Dateinamens stdin sein, siehe Problem 671 und das Problem wurde behoben PR 681

dies ist bis heute (Juli 2019) noch nicht freigegeben. Die einzige Möglichkeit besteht darin, mit Node-Sass zu arbeiten oder einen nicht freigegebenen Sass-Loader zu verwenden

0
Nadav SInai