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

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

简介

说明

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

官网网址

处理资源路径 | Vue Loader

解析(Resolve) | webpack 中文文档

css-loader | webpack 中文文档

~ 概述

引用自Vue官网

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

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

尤大是这样说的：

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

原文：

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博客

示例

Xxx.vue

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

Scss文件： 

用法2：模块

官网网址

解析(Resolve) | webpack 中文文档

用法

@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'],
  },
};