2022.7.29 - css使用@import后面加~波浪符号和不加有什么区别？

css使用@import后面加~波浪符号和不加有什么区别？例如：

@import 'bulma/css/bulma.css'
@import '~bulma/css/bulma.

这不是CSS @import的原生规则，而是webpack的css-loader的语法，详见css-loaderss'↓↓↓

要从node_modules路径 (include resolve.modules) 和 for导入样式，请在其alias前面加上~:

@import url(~module/style.css) => require('module/style.css')
@import url('~module/style.css') => require('module/style.css')
@import url(~aliasDirectory/style.css) => require('otherDirectory/style.css')

加~号，类似于一个变量，比如你在webpack中通过alias定义了一些路径为变量，在css中引用时就可以直接以～加路径变量直接引入该路径下文件，而不加的话，应该是 通过相对路径去查找该文件