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

Posted 2023-02-22

【中文标题】Webpack - 在 CSS 中实现别名的步骤

【英文标题】：Webpack - steps to implement aliases inside CSS

【发布时间】：2018-03-29 09:25:32

【问题描述】：

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

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

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

图片：背景图片：url(~imagesalias/images/image.png); 字体：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"
        ]
      
    ]
  

【参考方案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');

【讨论】：

您能否链接到解释为什么在此处使用波浪号 (~) 有效的资源？

是的，这意味着它是一个模块而不是相对路径。查看这个 Github 线程。有人问同样的问题。 github.com/webpack-contrib/css-loader/issues/49