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(~Images别名/图像/Image.png)；
2. 字体: src: url('~fontalias/fonts/font.ttf')格式(‘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');