举例来说，react或vue项目里。CSS用到url的时候，~和@是什么用法。在哪里配置的，MDN里好像也没写这个。求一个完整的步骤 background: center/cover url('~@/assets/login.png');

css里~和@是什么意思？

AI BotBETA

在 CSS 中，~ 和 @ 本身并没有特定的意义。它们可能是在这个具体的例子中被用作路径简写或特定框架的语法。

在你给出的例子中，~ 和 @ 是路径的一部分。它们可能被解释为相对于当前文件的路径，类似于 Node.js 的文件路径解析。具体来说，~ 可能代表项目的根目录，而 @ 可能代表某个子目录（例如 src）。

这样的路径解析通常在前端框架（如 Vue 或 React）中用于模块的导入和配置。这样的路径简写使得代码更简洁，特别是当项目结构复杂时。

以下是一个可能的配置步骤：

安装必要的工具：首先，确保你已经安装了构建工具（如 Webpack 或 Vite）和相关的加载器（如 file-loader 或 url-loader）。
配置路径解析：在你的构建配置中，你需要设置路径解析规则，以便 ~ 和 @ 可以正确地解析为文件路径。例如，在 Webpack 中，你可以在配置文件中添加类似以下的规则：

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src') // 这将使 @ 指向项目的 src 目录
  }
}

对于 ~，如果你希望它指向项目的根目录，你可能需要在其他地方进行配置，或者简单地使用相对路径。

使用路径：一旦配置完成，你就可以在 CSS 或其他文件中使用这些简写路径了。在你的例子中，路径将被解析为相对于当前文件的 src/assets/login.png。
加载资源：最后，确保你的构建工具知道如何处理这些资源。你可能需要配置加载器来处理这些文件，例如使用 file-loader 或 url-loader。

请注意，具体的步骤和语法可能会根据你使用的框架和工具有所不同。以上是一个基于常见前端工作流的概述。如果你能提供更多关于你所使用的特定框架或工具的信息，我可以提供更详细的指导。

3 个回答

得票最新

✓ 已被采纳

Vue
在jsconfig.json或tsconfig.json里面配置的:

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
}
}

@是设置的引用路径，不用../这样比较麻烦的方式，~是告诉webpack这是一个模块

另外css里的@是代表规则，~是相邻选择器

撰写回答

推荐问题