问题：

前端 - css里~和@是什么意思？

笪波鸿

2024-02-01

举例来说，react或vue项目里。CSS用到url的时候，~和@是什么用法。在哪里配置的，MDN里好像也没写这个。求一个完整的步骤

  background: center/cover url('~@/assets/login.png');

共有4个答案

钱繁

2024-02-01

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

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

高才

2024-02-01

~ 是 css-loader 提供的
https://webpack.docschina.org/loaders/css-loader/

@ 一般是在 resolve.alias 中配的文件目录别名
https://webpack.docschina.org/configuration/resolve/#resolvea...

宁侯林

2024-02-01

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

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

吕作人

2024-02-01

在 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。

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

共有4个答案