webpack sass-loader 不会解析 url

Posted 2023-02-22

【中文标题】webpack sass-loader 不会解析 url

【英文标题】：webpack sass-loader won't resolve urls

【发布时间】：2020-04-30 09:41:48

【问题描述】：

虽然 css 文件解析得很好，但在 scss 中它根本无法解析。有谁知道解决方案？ Sass-loader 告诉我使用“resolve-url-loader”，但我无法让它工作。 我试图添加字体真棒。如果我使用 css 版本，它工作得很好（文件加载器甚至将字体复制到 dist）但没有 scss。

这是我的产品配置文件。

webpack.production.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');

const plugins = [
  new HtmlWebpackPlugin(
    inject: false,
    hash: true,
    template: __dirname + '/../src/app/Views/layouts/layout-template.phtml',
    filename: __dirname + '/../src/app/Views/layouts/layout.phtml'
  ),
  new MiniCssExtractPlugin(
    filename: 'css/[name].css',
    chunkFilename: 'css/[name].css',
  ),
];

module.exports = () => (
  output: 
    publicPath: '/dist/',
  ,
  optimization: 
    minimize: true,
    minimizer: [new TerserJSPlugin(
      terserOptions: 
        extractComments: 'all',
        compress: 
          drop_console: true
        
      
    ), new OptimizeCSSAssetsPlugin()],
  ,
  module: 
    rules: [
      
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: 
          loader: 'babel-loader',
          options: 
            presets: ['@babel/preset-env']
          
        
      ,
      
        test: /\.(sa|sc|c)ss$/,
        use: [
          
            loader: MiniCssExtractPlugin.loader,
          ,
          'css-loader?',
          'postcss-loader',
          'resolve-url-loader',
          'sass-loader'
        ],
      
    ]
  ,
  plugins
);

提前致谢。 干杯

【参考方案1】：

此配置适用于我：

替换这部分对象?

    test: /\.scss$/,
    use: [
           MiniCssExtractPlugin.loader, 
          
            loader: 'css-loader',
          , 
          
            loader: 'resolve-url-loader'
          , 
          
            loader: 'sass-loader',
           
         ]

【讨论】：

你有一个可以使用这些设置的 GitHub 项目吗？

【参考方案2】：

我想通了。 我需要将'resolve-url-loader'的版本降低到2并将sourceMap添加到sass-loader。

   
    test: /\.(sa|sc|c)ss$/,
    use: [
      
        loader: MiniCssExtractPlugin.loader,
      ,
      'css-loader',
      'postcss-loader',
      'resolve-url-loader',
      'sass-loader?sourceMap'
    ],