为什么样式 scope 会出错：TypeScript 发出没有 output 错误

Question

当我像这样在 vue 3 组件样式块中添加scoped时：

<style lang="scss" scoped>

#translate-btn {
    //display: none;
    position: absolute;
    z-index: 9999999999;
    left: 0;
    top: 0;
}

#translate-btn .reddwarf-btn-icon{
  width: 18px;
  height: 28px;
  background-image: url('chrome-extension://__MSG_@@extension_id__/resource/image/lo.jpg');
  background-color: transparent;

}

.translate-pop-button{
  width: 28px;
  height: 28px;
  background:transparent;
  background-image: url('chrome-extension://__MSG_@@extension_id__/resource/image/lo.jpg');
  background-color:transparent;
}

</style>

显示编译错误：

ERROR in ./src/public/widget/translator/TranslatorPop.vue?vue&type=template&id=6bc385e0&scoped=true&ts=true (./node_modules/ts-loader/index.js??clonedRuleSet-1!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[11].use[0]!./src/public/widget/translator/TranslatorPop.vue?vue&type=template&id=6bc385e0&scoped=true&ts=true)
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/src/public/widget/translator/TranslatorPop.vue.ts.
    at makeSourceMapAndFinish (/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/ts-loader/dist/index.js:52:18)
    at successLoader (/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/ts-loader/dist/index.js:39:5)
    at Object.loader (/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/ts-loader/dist/index.js:22:5)
 @ ./src/public/widget/translator/TranslatorPop.vue?vue&type=template&id=6bc385e0&scoped=true&ts=true 1:0-307 1:0-307
 @ ./src/public/widget/translator/TranslatorPop.vue 1:0-94 8:68-74
 @ ./src/content/handler/PageEvent.ts 1:0-73 44:30-43
 @ ./src/content/index.ts 1:0-79 4:36-48 7:8-26

webpack 5.67.0 compiled with 1 error in 124 ms

为什么范围限制会导致错误？ 当我删除范围时，编译器工作正常，当添加 scope 时，编译器构建失败并显示错误。这是 webpack 配置：

  const path = require('path');
  const webpack = require( 'webpack' );
  const MiniCssExtractPlugin = require( 'mini-css-extract-plugin');
  const HtmlWebpackPlugin = require( 'html-webpack-plugin');
  const CopyPlugin = require("copy-webpack-plugin");
  const { VueLoaderPlugin } = require("vue-loader");

  module.exports = {
    entry : {
      'popup/popup' : './src/popup/',
      'background/background': './src/background',
      'content/content': './src/content' 
    } ,
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
      alias: {
          vue: 'vue/dist/vue.esm-bundler.js',
          process: 'process/browser',
          '@': path.resolve(__dirname, '../../../src'),
      },
    },
    output : {
      path : path.resolve(__dirname, '../../bundle') ,
      filename : '[name].js'
    },
    module : {
      rules : [
        {
          test: /\.ts$/,
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/]
          },
          exclude: /node_modules|\.d\.ts$/
        },
        {
          test: /\.d\.ts$/,
          loader: 'ignore-loader'
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        {
          test : /\.js$/ ,
          exclude : [ /node_modules(?!(\/|\\?\\)(translation\.js|selection-widget|connect\.io|chrome-env)\1)/ ] ,
          loader : 'babel-loader'
        } ,
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
        {
          test : /\.(scss)$/ ,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        }
      ]
    },
    plugins : [
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
      new VueLoaderPlugin(),
      new CopyPlugin({
        patterns: [
          { from: "src/manifest.json", to: "manifest.json" },
          { from: "src/resource/image", to: "resource/image" },
        ],
      }),
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css",
      }),
      new HtmlWebpackPlugin({
        filename: 'popup/popup.html',
        template: 'src/popup/index.html',
        inject: false,
      }),
      new webpack.DefinePlugin({
        __VUE_OPTIONS_API__: false,
        __VUE_PROD_DEVTOOLS__: false,
      }),
    ]
  };

Answer 1

您是否尝试过删除lang="scss"属性，您在 css 代码中使用常规嵌套，这可能是导致 scss 语法问题的原因。

我尝试了以下并且工作正常。 但是，它可能与您的原始代码有很大不同。

<template>
    <div>
        <button id="translate-btn">
            <i class="reddwarf-btn-icon"></i><span>Lorem, ipsum.</span>
        </button>
        <div class="translate-pop-button"></div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name : 'Test'
})
</script>

<style scoped>
#translate-btn {
    /*display: none;*/
    position: absolute;
    z-index: 9999999999;
    left: 0;
    top: 0;
}
#translate-btn .reddwarf-btn-icon{
    width: 18px;
    height: 28px;
    background-image: url('chrome-extension://__MSG_@@extension_id__/resource/image/lo.jpg');
    background-color: transparent;
}

.translate-pop-button{
  width: 28px;
  height: 28px;
  background:transparent;
  background-image: url('chrome-extension://__MSG_@@extension_id__/resource/image/lo.jpg');
  background-color:transparent;
}
</style>