Webpack - 在 CSS 中实现别名的步骤

Question

Webpack 允许我们创建解析别名，并在我们的 CSS 代码等中进一步使用它。

resolve: {
    extensions: ['.js', '.vue', '.json', '.scss', '.css'],
    alias: {
      'fonts': path.join(__dirname, 'assets/fonts'),
      'images': path.join(__dirname, 'assets/images')
    }
  }

我的问题是，实现别名并在 LESS/SCSS 中使用它的以下步骤是什么？

图片：
1. 背景图片：url（~imagesalias/images/image.png）;
2. 字体： src： url（'~fontalias/fonts/font.ttf'） format（'truetype'）;

我当前用于开发目的的 CSS/SCSS 加载器：

 module: {
    rules: [
      {
        test: /.css$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "resolve-url-loader"
        }]
      },
      {
        test: /.scss$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "resolve-url-loader"
        }, {
          loader: "sass-loader"
        }]
      }
    ]
  }

Answer 1

我认为

您的问题是您没有正确访问您的路径。

如果您的 webpack 解析路径为：

alias: {
  'fonts': path.join(__dirname, 'assets/fonts'),
  'images': path.join(__dirname, 'assets/images')
}

然后为了在 css 或 scss 中访问它，它应该是：

background-image: url(~images/image.png);
src: url('~fonts/font.ttf') format('truetype');