web-dev-qa-db-fra.com

Webpack 4 avec sass-loader & resolution-url-loader - Les chemins d'image ne sont pas trouvés

Configuration minimale reproductible ici: https://github.com/jamesopti/webpack_playground/tree/resolve_url_loader_issue

J'essaie d'utiliser resolve-url-loader pour ajouter un hashname à mes chemins d'image scss url(), mais j'ai du mal à le faire fonctionner avec webpack 4 . J'ai un tas d'images dans /static/img/** qui sont référencées dans mon SCSS comme:

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

Ce qui se retrouve dans mon css comme étant exactement la même chose (resol-url-loader ne les trouve pas)

Lorsque j'exécute la configuration suivante via Webpack, je constate que le chargeur de résolution trouve le droit url() et son chemin, mais le mode de débogage indique NOT FOUND.

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

Existe-t-il une configuration de sortie incorrecte? J'ai essayé diverses combinaisons de paramètres en vain:

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

Mon objectif final est que le chargeur de fichiers les transforme en version hachée/dist:

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

// configuration des règles Webpack

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'
              ],
            },
          },
        ],
      },
]
webpacksass-loaderresolve-url-loader
7
jamis0n

Il s'avère que tout ce dont j'avais besoin était file-loader pour faire ce que je voulais.

Lorsqu'une image (correspondant aux extensions de fichier spécifiées) est rencontrée par l'un des chargeurs css/sass/style, elle est traitée via file-loader, qui la copie dans le répertoire de sortie spécifié avec le format de nommage spécifié et renvoie le nom du chargeur sass utiliser comme nom de fichier.

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

J'ai eu le même problème. Je crois que vous devezurl-loader charger les images correctement avec Webpack 4. Cette configuration a fonctionné pour moi:

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