search

web-infra-dev / rsbuild

The Rspack-based build tool. It's fast, out-of-the-box and extensible.
https://rsbuild.dev/
MIT License
1.36k stars 111 forks source link

[Bug]: ⚠ ModuleWarning: resolve-url-loader: webpack misconfiguration │ webpack or the upstream loader did not supply a source-map #3002

Closed bosens-China closed 1 month ago

bosens-China commented 1 month ago

Version

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 102.23 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 126.0.6478.183
    Safari: 17.5
  npmPackages:
    @rsbuild/core: ^1.0.1-beta.4 => 1.0.1-beta.4 
    @rsbuild/plugin-babel: ^1.0.1-beta.4 => 1.0.1-beta.4 
    @rsbuild/plugin-less: ^1.0.1-beta.4 => 1.0.1-beta.4 
    @rsbuild/plugin-node-polyfill: ^1.0.3 => 1.0.3 
    @rsbuild/plugin-sass: ^1.0.1-beta.4 => 1.0.1-beta.4 
    @rsbuild/plugin-svgr: ^1.0.1-beta.4 => 1.0.1-beta.4 
    @rsbuild/plugin-vue: ^1.0.1-beta.4 => 1.0.1-beta.4 
    @rsbuild/plugin-vue2: ^1.0.1-beta.4 => 1.0.1-beta.4 
    @rsbuild/plugin-vue2-jsx: ^1.0.1-beta.4 => 1.0.1-beta.4

Details

迁移vuecli项目的过程中，发现scss文件提示这个错误

.spinning {
    height: 350px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    line-height: 350px;
    z-index: 999;
}

#components-layout-demo-custom-trigger .trigger {
    cursor: pointer;
    transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
    color: $primary-color;
}

.my-layout {
    height: 100%;

    .layout-header {
        background: #fff;
        padding: 0;
        height: 48px;
        position: fixed;
        right: 0;
        top: 0;
    }

    .breadcrumb {
        height: 30px;
        padding: 5px 0 0 24px;
        background: #F7F8FA;
    }

    .ant-menu-dark,
    .ant-menu-dark .ant-menu-sub {
        background: #162c64;
    }

    .ant-menu-dark .ant-menu-inline.ant-menu-sub {
        background: #162c64;
        box-shadow: none !important;
    }

    .ant-menu-item .anticon,
    .ant-menu-submenu-title .anticon {
        min-width: 24px;
        font-size: 24px;
        transform: scale(0.67);
        vertical-align: middle;
        margin-top: -2px;
        margin-right: 5px;
    }

    .ant-menu-inline-collapsed>.ant-menu-item .anticon,

    .ant-menu-inline-collapsed>.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item .anticon,

    .ant-menu-inline-collapsed>.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-submenu>.ant-menu-submenu-title .anticon,

    .ant-menu-inline-collapsed>.ant-menu-submenu>.ant-menu-submenu-title .anticon {
        min-width: 24px;
        font-size: 24px;
        line-height: 56px;
        transform: scale(1);
    }

    .ant-menu-inline-collapsed>.ant-menu-item,
    .ant-menu-inline-collapsed>.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item,

    .ant-menu-inline-collapsed>.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-submenu>.ant-menu-submenu-title,

    .ant-menu-inline-collapsed>.ant-menu-submenu>.ant-menu-submenu-title {
        text-align: center;
        padding: 0 !important;
        height: 56px;
        min-width: 24px;
    }

    .layout-main {
        height: 100%;
        /* min-width: 1126px; */
        /* overflow-x: auto!important;*/
    }

    .ant-layout {
        background: #F7F8FA;
    }
}

.trans {
    transition: all 0.2s;
}

.layout-inner {
    padding-top: 48px;
    width: 100%;
    height: 100%;
}

.layout-bg {
    background: #F7F8FA;
}

.layout-content {
    position: relative;
    height: calc(100% - 30px);
}

.my-layout-collapsed {

    .ant-menu-dark .ant-menu-item:hover,
    .ant-menu-dark .ant-menu-item-active,
    .ant-menu-dark .ant-menu-submenu-active,
    .ant-menu-dark .ant-menu-submenu-open,
    .ant-menu-dark .ant-menu-submenu-selected,
    .ant-menu-dark .ant-menu-submenu-title:hover {
        background-color: $suncn-blue-400 !important;
        color: #fff !important;
    }
}

.folder-nav:hover {
    color: #fff !important;
}

.ant-menu-inline-collapsed {
    width: 57px !important;
}

.left-navlist::-webkit-scrollbar {
    width: 6px;
    /*对垂直流动条有效*/
    height: 6px;
    /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
.left-navlist::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
    background-color: transparent;
    border-radius: 3px;
}

/*定义滑块颜色、内阴影及圆角*/
.left-navlist::-webkit-scrollbar-thumb {
    border-radius: 3px;
    /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
    background-color: rgba(213, 225, 255, .2);
}

/*定义两端按钮的样式*/
.left-navlist::-webkit-scrollbar-button {
    background-color: transparent;
}

/*定义右下角汇合处的样式*/
.left-navlist::-webkit-scrollbar-corner {
    background: transparent;
}

报错信息

File: /Users/yliu/Desktop/job/jcnl-admin/src/layout/style.scss:1:1
  ⚠ ModuleWarning: resolve-url-loader: webpack misconfiguration
  │   webpack or the upstream loader did not supply a source-map (from: /Users/yliu/Desktop/job/jcnl-admin/node_modules/@rsbuild/plugin-sass/compiled/resolve-url-loader/index.js??clonedRuleSet-81.use[3])

关闭map

    pluginSass({
      sassLoaderOptions: {
        sourceMap: false,
        additionalData:
          '@import "@/styles/variables.scss";@import "@/styles/mixin.scss";', // @import "@/styles/localIcon.scss";
      },
    }),

提示 File: /Users/yliu/Desktop/job/jcnl-admin/src/styles/index.scss:1:1 × Module build failed: ╰─▶ × Error: HookWebpackError: × Module build failed: │ ╰─▶ × Error: resolve-url-loader: error processing CSS │ │ a valid source-map is not present (ensure preceding loaders output a source-map)

正确做法是什么？

Reproduce link

none

Reproduce Steps

正常输出

bosens-China commented 1 month ago

完整配置文件

import { defineConfig, loadEnv } from "@rsbuild/core";
import path from "path";
import { pluginLess } from "@rsbuild/plugin-less";
import { pluginSass } from "@rsbuild/plugin-sass";
import { pluginSvgr } from "@rsbuild/plugin-svgr";
import { pluginBabel } from "@rsbuild/plugin-babel";
import { pluginVue2 } from "@rsbuild/plugin-vue2";
import { pluginVue2Jsx } from "@rsbuild/plugin-vue2-jsx";
import { pluginNodePolyfill } from "@rsbuild/plugin-node-polyfill";

const { publicVars } = loadEnv({ prefixes: ["VUE_APP_"] });

export default defineConfig({
  plugins: [
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
    }),
    pluginSvgr(),
    pluginVue2(),
    pluginVue2Jsx(),
    pluginLess({
      lessLoaderOptions: {
        lessOptions: {
          // If you are using less-loader@5 please spread the lessOptions to options directly
          modifyVars: {
            "primary-color": "#5384FE",
            "error-color": "#ED4D37",
            "btn-danger-bg": "#ED4D37",
            "btn-danger-border": "#ED4D37",
            "success-color": "#48BB78",
            "text-color": "#4A5568",
            "text-color-secondary": "#A0AEC0",
            "btn-default-color": "#718096",
            "border-color-base": "#CBD5E0",
            "input-placeholder-color": "#A0AEC0",
            "tooltip-bg": "rgba(26,32,44,.8)",
            "heading-color": "#4A5568",
            "background-color-base": "#F7F8FA",
          },
          javascriptEnabled: true,
          math: "always",
        },
      },
    }),
    pluginSass({
      sassLoaderOptions: {
        additionalData:
          '@import "@/styles/variables.scss";@import "@/styles/mixin.scss";', // @import "@/styles/localIcon.scss";
      },
    }),
    pluginNodePolyfill(),
  ],
  source: {
    // 指定入口文件
    entry: {
      index: "./src/main.js",
    },
    define: publicVars,
    include: [
      /node_modules\/transpileDependencies/,
      /node_modules\/@antv/,
      /node_modules\/antv\/x6/,
      /node_modules\/vuex-persist/,
      /node_modules\/gm-crypt/,
      /node_modules\/sm-crypto/,
    ],
  },
  html: {
    template: "./public/index.html",
  },
  tools: {
    rspack: {
      devtool: "source-map",
      resolve: {
        extensions: [".vue", ".js", ".jsx", ".tsx", ".ts", ".json"],
        alias: {
          "@": path.resolve(__dirname, "src"),
        },
      },
    },
  },
});
chenjiahan commented 1 month ago

I can't reproduce this issue, can you provide a minimal reproduction?

github-actions[bot] commented 1 month ago

Hello @bosens-China. Please provide a reproduction repository or online demo. For background, see Why reproductions are required. Thanks ❤️

bosens-China commented 1 month ago

我创建了一个最小仓库也没这个错误。

但是能给一些建议吗，我不太清楚怎么排查到具体的原因，出现这个报错可能是啥导致的

bosens-China commented 1 month ago

@chenjiahan 定位到问题了

<template>
  <div>hello</div>
</template>
<script>
export default {};
</script>

<style lang="scss" scoped>
// @import "./style.scss";
@import url("~@/layout/style.scss");
</style>

注意上面的import导入就会出现这个问题。 这个是写法的问题，但是我不确定是否需要保留这种不规范写法

chenjiahan commented 1 month ago

建议还是改成规范的 Sass 写法哈 https://sass-lang.com/documentation/at-rules/import/