如果 css 文件位于组件文件夹之外，下一个别名中的 CSS 模块不会自动完成类名

Question

我将 VSCode 与 CSS 模块扩展一起用于带有路径别名的 NextJS 项目。文件自动补全工作正常，但类名本身仅在导入没有路径别名的文件时显示。

例如

import styles from "./Main.module.css";

将显示自动完成变体：

但是

import commonStyles from "@styles/common.module.css";

不会显示任何内容，它不会加载有关文件的任何内容，仅全局自动完成提示

我使用最新版本的 NextJS、vscode 和扩展。 这是我的 tsconfig 和下一个配置：

{
    "compilerOptions": {
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "bundler",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "plugins": [
            {
                "name": "next"
            }
        ],
        "paths": {
            "@/*": ["./src/*"],
            "@styles/*": ["./src/shared/UI/styles/*"]
        }
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
    "exclude": ["node_modules"]
}

/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack(config) {
        const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.(".svg"));
        config.module.rules = [
            ...config.module.rules.filter((rule) => rule !== fileLoaderRule),
            { ...fileLoaderRule, exclude: /\.svg$/i },
            {
                ...fileLoaderRule,
                test: /\.svg$/i,
                resourceQuery: {
                    ...fileLoaderRule.resourceQuery,
                    not: [...fileLoaderRule.resourceQuery.not, /component/],
                },
            },
            { test: /\.svg$/i, issuer: /\.[jt]sx?$/, use: "@svgr/webpack", resourceQuery: /component/ },
        ];
        return config;
    },
};

export default nextConfig;

如果有人也遇到这个问题并解决它，请帮忙

Answer 1

我通过安装一个名为 Css Modules 的 VS Code 扩展解决了这个问题

名称：CSS 模块 ID：clinyong.vscode-css-modules 描述：CSS 模块的 Visual Studio Code 扩展 版本：0.5.1 编辑：克林勇 Vínculo de VS Marketplace：https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules