Webpack--CSS、Sass、Scss的import中~（波浪线）的作用

缺乏、安全感 2023-09-28 20:10 11阅读 0赞

原文网址：[Webpack--CSS、Sass、Scss的import中~（波浪线）的作用\_IT利刃出鞘的博客-CSDN博客][Webpack--CSS_Sass_Scss_import_IT_-CSDN]

## 简介 ##

**说明**

本文介绍CSS、Sass、Scss的import中~（波浪线）的作用。

**官网网址**

[处理资源路径 | Vue Loader][_ Vue Loader]

[解析(Resolve) | webpack 中文文档][Resolve_ _ webpack]

[css-loader | webpack 中文文档][css-loader _ webpack]

## **~ 概述** ##

**引用自[Vue官网][_ Vue Loader]**

资源 URL 转换会遵循如下规则：

*  如果路径是绝对路径 (例如 /images/foo.png)，会原样保留。
 *  如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
 *  如果路径以 ~ 开头，其后的部分将会被看作模块依赖。
    
     *  这意味着你可以用该特性来引用一个 Node 依赖中的资源：<img src="~some-npm-package/foo.png">
 *  如果路径以 @ 开头，也会被看作模块依赖。
    
     *  如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。一般会将 @ 指向 /src。

**尤大是这样说的**：

vue-html-loader和css-loader把不以/开头的路径作为相对路径处理，如果需要使用模块路径，需要在路径前加一个波浪线~。

[原文][Link 1]：

> vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~

## 用法1：别名（alias） ##

**说明**

如果路径以 ~ 开头，其后的部分将会被看作模块依赖。可以给路径配置别名，比如：将 @ 指向 /src。这样一来，@import "~@/xx/yy"; 实际对应的就是：@import "/src/xx/yy";

别名的配置方法见：[vue--配置根目录(用@代表src目录)\_IT利刃出鞘的博客-CSDN博客][vue--_src_IT_-CSDN]

**示例**

Xxx.vue

<template>
        
    </template>
    
    <script>
        
    </script>
    
    <style lang="scss" scoped>
      @import "~@/styles/mixin.scss";
      @import "~@/styles/variables.scss";
    </style>

Scss文件：

![ad25b735d0314d3aa0f6bbcb69e067a5.png][]

## 用法2：模块 ##

**官网网址**

[解析(Resolve) | webpack 中文文档][Resolve_ _ webpack 1]

**用法**

@import导入样式文件时，路径前加上波浪线 ～，比如：

import “~bootstrap/less/bootstrap.less”;

就是告诉 webpack 以模块的方式去加载这个样式文件：去对应的 resolve.modules 定义的文件夹中去寻找对应的样式文件。

**配置详解**

配置方法（webpack.config.js）：

module.exports = {
      //...
      resolve: {
        modules: ['node_modules'],
      },
    };

告诉 webpack 解析模块时应该搜索的目录。

绝对路径和相对路径都能使用，它们之间有一点差异。

通过查看当前目录以及祖先路径（即 ./node\_modules, ../node\_modules 等等）， 相对路径将类似于 Node 查找 'node\_modules' 的方式进行查找。

使用绝对路径，将只在给定目录中搜索。

**如果想添加一个目录到模块搜索目录，此目录优先于 node\_modules/ 搜索，方法如下：**

webpack.config.js

const path = require('path');
    
    module.exports = {
      //...
      resolve: {
        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
      },
    };

##  ##

[Webpack--CSS_Sass_Scss_import_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126333176
[_ Vue Loader]: https://vue-loader.vuejs.org/zh/guide/asset-url.html#%E8%BD%AC%E6%8D%A2%E8%A7%84%E5%88%99
[Resolve_ _ webpack]: https://webpack.docschina.org/configuration/resolve/#resolve
[css-loader _ webpack]: https://webpack.docschina.org/loaders/css-loader/#import
[Link 1]: https://github.com/vuejs/vue-loader/issues/193#issuecomment-206510064
[vue--_src_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125463222
[ad25b735d0314d3aa0f6bbcb69e067a5.png]: https://img-blog.csdnimg.cn/ad25b735d0314d3aa0f6bbcb69e067a5.png
[Resolve_ _ webpack 1]: https://webpack.docschina.org/configuration/resolve/#resolvemodules