vue2 scss编译报错

[sweetwisdom]

error   Compile error: 
Failed to compile, check the errors for troubleshooting.
File: ./src/components/customDropdown/index.vue.scss?vue&type=style&index=0&id=368d4696&lang=scss&scoped=true!=!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/@rsbuild/shared/compiled/postcss-loader/index.js??clonedRuleSet-29.use[0]!../../../node_modules/@rsbuild/shared/compiled/resolve-url-loader/index.js??clonedRuleSet-29.use[1]!../../../node_modules/@rsbuild/shared/compiled/sass-loader/index.js??clonedRuleSet-29.use[2]!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/customDropdown/index.vue?vue&type=style&index=0&id=368d4696&lang=scss&scoped=true
  × Module build failed:
  ╰─▶   × expected selector.
        │   ╷
        │ 4 │   height: 50px;
        │   │                ^
        │   ╵
        │   src\components\customDropdown\index.vue 4:16  root stylesheet
        │

  help: File was processed with this loader: 'XXXXX\node_modules\vue-loader\lib\loaders\stylePostLoader.js$D:\02.company\08.screen-
        ipad\node_modules\@rsbuild\shared\compiled\postcss-loader\index.js??clonedRuleSet-29.use[0]$XXXXX\node_modules\@rsbuild\shared\compiled\resolve-url-loader\index.js??
        clonedRuleSet-29.use[1]$XXXXX\node_modules\@rsbuild\shared\compiled\sass-loader\index.js??clonedRuleSet-29.use[2]$XXXXX\node_modules\vue-
        loader\lib\index.js??vue-loader-options'

之前项目是采用vue-cli开发的

[sweetwisdom]

config 配置如下

import { defineConfig } from "@rsbuild/core";
import { pluginVue2 } from "@rsbuild/plugin-vue2";
import { pluginNodePolyfill } from "@rsbuild/plugin-node-polyfill";
const path = require("path");
export default defineConfig({
  plugins: [pluginNodePolyfill(), pluginVue2()],
  source: {
    // 指定入口文件
    entry: {
      index: "./src/main.js",
    },
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
    extensions: [".js", ".json", ".wasm", ".vue", ".jsx", ".tsx"],
  },
  dev: {
    progressBar: true,
    // writeToDisk: true, 不占用内存，写入到磁盘
  },
  html: {
    template: "./public/index.html",
  },
  tools: {
    sass: {
    
    },
    less: {
      //   additionalData: `@import "${path.resolve(__dirname, 'src')}/components/index.less";`,
      //   lessOptions: {
      //     relativeUrls: true,
      //     rewriteUrls: 'local',
      //     modifyVars: {
      //       '@primary-color': '#077BFC',
      //       '@btn-primary-bg': '#077BFC',
      //     },
      //     javascriptEnabled: true,
      //   },
    },
  },
  output: {
    distPath: {
      root: "screen",
      js: "resource/js",
    },
    assetPrefix: "./",
    clean: true,
    filename: "js/[name].js",
    cssFilename: "css/[name].css",
    assetModuleFilename: "assets/[hash][ext]",
  },
  module: {
    rules: [
      //  {
      //     test: /\.less$/,
      //     loader: "less-loader",
      //     type: "css",
      //   },
      //   {
      //     test: /\.scss$/,
      //     loader: 'sass-loader',
      //     type: 'css',
      //     exclude: /node_modules/,
      //   },
    ],
  },
  server: {
    port: 8000,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
 
  },
});

[xc2]

请发一下 vue 文件的内容

[sweetwisdom]

谢谢，在js使用`'@/css/reset.scss',是不会报错的
但是在vueSFC中使用就报错了

<template>
  <div class="app">
    <h2>2021</h2>
    <tets></tets>
    <app-info></app-info>
    
  </div>
</template>
<style lang="scss" scoped>
@import '@/css/reset.scss';
$mainColor: #138fda;
$mainSize: 22px;
.app {
  h2 {
    color: $mainColor;
    font-size: $mainSize;
  }
}
</style>

[sweetwisdom]

代码在这里： sandbox-livedemo

[xc2]

这个 demo 里面报错是因为没有 src/css/reset.scss 这个文件，我把 sfc 里面改成 @/css/pre.scss 之后报错消失了。

可以复现一下顶楼的报错嘛

[sweetwisdom]

🤣抱歉，复现错了
楼上的bug我知道原因了
把scss 里面的 /deep/ 换成 ::v-deep就好了

-  /deep/.el-select {
+  ::v-deep.el-select {
    .el-input {
    }