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');

我当前用于 DEV 的 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');