webpack中的css引入文件需要用~@的形式，为什么？

最新推荐文章于 2023-06-14 12:08:12 发布
转载 最新推荐文章于 2023-06-14 12:08:12 发布 · 2.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5bf532a1518825741f626355
文章标签：

#webpack #ViewUI

本文解释了在Webpack配置中使用~符号的原因。当在样式文件中引用Sass或Less资源时，添加~前缀可以确保从项目根目录开始查找文件，而非当前文件的相对路径。这一技巧适用于sass-loader和less-loader，有助于避免路径配置错误。



如上分别是sass-loader 和 less-loader 的官方文档，这里大体意思就是在引入文件的时候需要在前面加上~，因为~/解析到主目录。css /less/ sass没有用于导入相关文件的特殊语法。写入@import“file”与“import”./file相同

所以这里添加的~实际上是为了告诉webpack这里是从根目录开始寻找，而不是相对目录。

转载于:https://juejin.im/post/5bf532a1518825741f626355

前端领域Webpack与PostCSS的结合应用
小白菜的博客
05-20 957
本文旨在为前端开发者提供Webpack与PostCSS结合的全面指南，涵盖从基础配置到高级优化的全流程实践。如何利用Webpack的模块化能力处理CSS资源PostCSS在现代前端工作流中的核心价值两者结合的最佳实践和性能优化策略本文采用渐进式结构，从基础概念到高级应用，最后探讨未来趋势。核心概念与联系配置与实现细节实际项目案例性能优化策略未来发展方向Webpack: 现代JavaScript应用程序的静态模块打包工具PostCSS。
Webpack - @ 和 ~ 区别
02-11 4665
@ @这是webpack设置的路径别名。 这东西在vue标准模板里面的 build/webpack.base.conf 这个文件里面。 resolve: { // 路径别名 alias: { '@': resolve('src'), 'vue$': 'vue/dist/vue.esm.js' } } 就是说@这东西代表着到src这个文件...
Webpack 中css 如何 import 使用 alias别名 相对路径
weixin_34417200的博客
04-14 1198
在开发过程中我们发现以下问题: JS可以用alias，css就报错 js中:import tool from '@/utils/xxx' (可以引用)css中:@import '@/assets/css/reset.sass' (报错) 分析 原因是 css 文件会被用 css-loader 处理，这里 css @import 后的...
Webpack--CSS、Sass、Scss的import中~（波浪线）的作用
IT利刃出鞘的博客
08-25 1877
本文介绍CSS、Sass、Scss的import中~（波浪线）的作用。
Webpack
Dear_Mr的博客
03-29 5690
认识Webpack Webpack可以看作是模块打包机，做的事情就是，分析项目结构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（Sass，TypeScript），并将其转换和打包为合适的格式以供浏览器使用，在3.0出现以后，Webpack还肩负了优化项目的责任 --save 保存 --dev 开发环境 打包：可以将多个Java...
webpack打包文件中的@符号表示什么意思
weixin_30781775的博客
07-02 345
　　在看使用webpack打包的项目代码时，经常会看到在路径中引用@符号 import one from '@/views/one.vue' 　　 　　那这里的@符号到底表示什么意思呢？ 　　这其实利用了webpack的resolve.alias特性，webpabk.config.js的配制代码如下，在webpack打包时，会把路径引用中的@符号，转换为相对应的路...
webpack4 CSS Tree Shaking的使用
10-18
在webpack4中实现CSS Tree Shaking的关键知识点涵盖了模块打包优化、CSS处理与Tree Shaking原理、webpack插件和loader的使用，以及PurifyCSS工具的应用。以下将详细解读这些知识点： **webpack4 CSS Tree Shaking的...
webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理
jieyucx的博客
06-14 5814
兼容性在以前一直是个比较令大家头疼的事情，尤其是那时候还得兼容IE，webpack肯定是考虑到了这些，实现样式兼容性，我们需要借助几个loader。这就是本章的内容拉，webpack处理css文件打包到单独的文件、压缩、以及兼容性处理。在以前的章节中，我们配置过的生产环境的打包文件，webpack.prod.js。我们去控制台将往速调慢，然后运行打包好的index.html文件。用法很简单，引入，然后在plugin配置对象中添加就可以了。如图，css文件已经被处理成了单独的文件了。文件加载时，会创建一个。
webpack的CSS加载器的使用
10-18
本文将详细介绍webpack中的CSS加载器使用方法，即如何在webpack中加载和处理CSS文件。 首先，loader（加载器）是webpack用来处理非JavaScript文件的转换器。它是一个运行在Node.js环境下的函数，通过参数获取资源...
webpack中如何加载静态文件的方法步骤
10-16
在现代前端开发中，Webpack是一个不可或缺的工具，它是一个静态模块打包器，用于将各种静态资源如JavaScript、CSS、图片等文件进行转换、打包。在开发过程中，除了JavaScript模块，我们也经常需要处理静态文件，如...
死命简单的webpack（2）- 引用css
weixin_33797791的博客
08-18 76
既然使用webpack后js的模块变得和node一模一样的令人喜爱，那么自然的，可以这样弄css？答案是可以。从一个案例开始： //c.html <html> <body> <div>Hello css</div> <script type="text/javasc...
webpack系列之CSS样式处理（含实例）
一起的远方的博客
03-19 890
讲过前两节的接收，我们对webpack有了基本的认识，对HtmlWebpackPlugin插件的各个属性也做了简要的说明，对其他相关属性可以参考。说完了js、html，我们来说一说css相关的配置。首先你可以试验一下，为我们编写的index.html文件编写样式，是不是直接使用相对路径引入css文件就可以了呢。答案是不可以的，因为HtmlWebpackPlugin会将index.html文件原样输...
Webpack中@的原理和用法
m0_63400611的博客
05-08 1796
在 webpack 中,可以在 webpack.config.js 文件中配置如下命令,使 @ 在代码中表示指定的路径 module.exports = { resolve: { alias: { //在 webpack 中设置代码中 @ 符号表示 src 这一层目录 '@': path.join(__dirname, './src/') } } } 之后在文件中使用的示例: import msg from '@/msg' //建议使用 @ 表示src源代码目录 从
CSS_引入方式
afsdha9051的博客
07-11 137
　一 CSS的引入方式 CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离 　　1.行内式行内式是在标记的style属性中设定CSS样式,不推荐使用。 <p style="background-color: red">Hello...
webpack项目中样式中的~和script中的@在项目中的区别
CSU_Zipple的博客
10-09 394
样式中的~和script中的@在项目中的区别 在项目的单组件文件中经常可以看到这两种模块引入方式： import LogoSvg from '@src/components/svg-icon/LogoSvg'; @import "~@src/css/variables.less"; 可以发现两者有些许不同：在less中前面加了一个波浪号，而在script中没有。那么两者的区别在哪里呢？ web...
html图片别名,VUE 定义全局css变量名和文件别名：“@”和“~”的使用
weixin_35843523的博客
06-09 555
var()var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。(这样做通常会产生无效的语法或者一个没有关联到变量的值。):root:root是一个伪类，表示文档根元素，非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用:root {--...
@和~@符号路径解决
qq_41180882的博客
07-02 2981
@代表项目的src路径，是vue-cli给我们提供的，解决路径比较长，找文件比较麻烦的问题 证明@是src并且是vue-cli通过webpack设置的,通过审查项目的 webpack 配置 通过命令vue inspect > output.js~@路径和js当中@类似,当时这里要依靠扩展来解决问题 (1)安装扩展Path Autocomplete (2)在vscode配置中添加下面设置...
vue中引入样式的方法
热门推荐
qq_41743601的博客
08-18 1万+
vue中引入样式的方法 文章目录vue中引入样式的方法1.引入css文件1.1在style标签中引入(可设置成局部)1.2全局引入1.3局部引入2.组件内部引入样式的污染3.同一个组件内新写样式4.@import和import的区别 1.引入css文件 1.1在style标签中引入(可设置成局部) 在标签上添加 scoped 属性后则变成了局部引用 注意：下图的icon.css文件仍然是全局引用，需要将文件后缀改为scss或者less才能变成局部的 在更换过程中建议改成scss类型，因为它支持css的所有
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值