开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Parcel + SASS:不使用波浪号运算符从node_modules导入？或者是其他原因？

Parcel是一个快速、零配置的Web应用程序打包工具，它支持多种前端开发语言和工具。SASS是一种CSS预处理器，它提供了更强大、更灵活的样式表编写方式。

在使用Parcel和SASS时，如果不使用波浪号运算符（~）从node_modules导入，可能有以下几个原因：

路径解析：使用波浪号运算符可以帮助解析正确的路径，确保从node_modules中导入的文件能够正确被找到。如果不使用波浪号运算符，可能需要手动指定正确的相对路径或者使用其他方式来解析路径。
编译错误：如果不使用波浪号运算符从node_modules导入，可能会导致编译错误。因为SASS文件中的@import语句默认只会在当前目录和SASS文件所在目录中查找导入的文件，而不会去node_modules中查找。使用波浪号运算符可以告诉编译器去node_modules中查找导入的文件。
依赖管理：使用波浪号运算符可以更好地管理项目的依赖关系。通过从node_modules中导入文件，可以确保项目使用的是正确版本的依赖库，并且可以方便地更新和管理这些依赖。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云开发者工具包（SDK）：https://cloud.tencent.com/product/sdk
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse

请注意，以上链接仅供参考，具体的产品选择应根据实际需求和情况进行评估和决策。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

懒人Parcel

在需要时使用 Babel，PostCSS 和 PostHTML 自动转换模块 - 甚至是node_modules。 ✂️ 零配置代码分割使用动态import() 语句。 ? 内置支持热加载 ?.../images/background.png'); } 除了纯 CSS ，还支持其他编译成 CSS 语言，如 LESS ，SASS 和 Stylus ，并以相同的方式工作。...可以用 npm 来安装它： npm install node-sass 一旦 node-sass 安装完成，你就可以在 JavaScript 文件中导入 SCSS 文件。 import '....在 Parcel 中使用 Babel 的方式与其单独使用或与其他打包器配合使用的方式相同。...： Parcel 构建速度快，但 Parcel 输出文件大导致 Parcel 构建速度快的原因和 iOS 比 Android 用起来更流畅的原因类似： Parcel 因为一体化内置，所以集成和优化的更好

2K1 0

89.精读《如何编译前端项目与组件》

通过 parcel / gulp / babel 构建组件。如果你喜欢零配置的 parcel，那么项目和组件都可以拿它来编译。...组件构建的目的主要在于发布 NPM，除了 ESNext 规范会使用 Babel 编译成 ES3，大部分代码写的很收敛，甚至对 SASS 的使用都要与 Typescript 插件一起组合成复杂的 Gulp...原因就是构建组件的代码太原始，冗余的代码没有删除，甚至直接引用的 SASS 代码仍然保留，更危险的是带上了一些特殊 webpack loader 才支持的语法。...mode: "production" }; 组件发布组件发布时，依然使用 webpack-cli 构建，但利用 webpack-node-externals 忽略对 node_modules 的解析...3 总结本文从 webpack 为切入点，但其实还可以从 parcel 或 gulp 为切入点，实现前端项目、组件构建体系的统一。

1K2 0

使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material Design

, "webpack-dev-server": "^3.1.8" } 补充说明一下版本号前的 ^,~ 的区别指定版本：比如"webpack": "4.19.0"，表示安装 4.19.0 的版本波浪号...，这边使用 scss,安装命令如下： npm install --save-dev style-loader css-loader sass-loader node-sass style-loader...(js|jsx)$/, // 不希望编译node_modules中的任何内容 exclude: /node_modules/, use: ['babel-loader...我们不需要 Material Dashboard React 包中的所有依赖项，因为我们使用 Webpack 构建了自己的服务器。除了产品本身，我们还添加了其他样式加载器。...这将允许我们刷新页面而不会出现任何其他错误，现在我们完成了。

9.3K6 0

vite新建vue3项目及安装插件笔记

安装 sass npm install sass 这边 lang 使用 scss，scss 是 sass 3 引入的新语法。...unplugin-element-plus 自动导入，使用 ElMessage、ElLoading 等组件，需要手动导入样式。...使用了 unplugin-auto-import，还可以自动导入 vue、vue-router、element 的 icon 等，需要什么配置什么： imports:["vue"], dts:'src/...，想想还是不试了，我觉得官方给的文档还是不够好，总有一些要去试，也有可能是本人看文档能力不行？...tips:后面安装了一些其他东西，不知道为什么主题色不生效了，被覆盖了，在 main.ts 用 import()定时器引入才有用，没找到是因为配置哪个导致的。

5332 0

前端构建这十年

◆ 写在前面前端模块化/构建工具从最开始的基于浏览器运行时加载的 RequireJs/Sea.js 到将所有资源组装依赖打包 webpack/rollup/parcel的bundle类模块化构建工具...，然后通过正则匹配获取require函数里面的字符串依赖这也是为什么二者都不允许require更换名称或者变量赋值，也不允许依赖字符串使用变量，只能使用字符串字面量的原因规范之争在当时还是相当混乱的...parcel 使用 worker 进程去启用多核编译，并且使用文件缓存。...parcel 支持 0 配置，内置了 html、babel、typescript、less、sass、vue等功能，无需配置，并且不同于webpack只能将 js 文件作为入口，在 parcel 中万物皆资源...原理拿 vite 举例： vite在启动服务器后，会预先以所有 html 为入口，使用 esbuild 编译一遍，把所有的 node_modules 下的依赖编译并缓存起来，例如vue缓存为单个文件。

9511 0

【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具

好，不扯了！本篇文章我将带大家如何从0到1开发一款极快，零配置的Vue3项目构建工具（parcel-vue-cli）。名字就这么记着吧！...当需要时，代码会使用Babel、postss和posthml自动转换，甚至是node_modules。使用动态import()语法，Parcel拆分输出包，以便只在初始加载时加载所需的内容。...使用HTML文件作为入口点使Parcel易于使用，因为它可以直接从HTML文件中检测依赖关系，并将所有检测到的依赖关系自动捆绑到各自的捆绑包中，而无需进行任何配置。...请注意，Parcel不支持在Vue 2中使用SFC，必须使用Vue 3 beta或更高版本。既然都这么说了，我们就用Vue 3。官网说，Parcel支持Vue，而无需任何其他配置。顿时爱了！...Parcel著名地要求零配置。这绝不是意味着不可配置，只是Parcel试图从代码本身中推断出尽可能多的信息，并将现有的配置文件用于其他工具（例如.babelrc）。

1.2K3 0

很多人上来就删除的package-lock.json，还有这么多你不知道的！

to directory "/app/workspace/SIT/node_modules/clipboard" 显示错误原因是 clipboard 插件没有安装 @babel/env 预设（preset...事件二：依赖包的新版插件 bug 一直正常使用的 braft-editor 优秀的富文本编辑器插件，最近在其他小伙伴电脑或者在我本地电脑重新部署项目，启动后发现 toHtml() 方法获取富文本 html...波浪号（tilde）+指定版本：比如 ~1.2.2 ，表示安装 1.2.x 的最新版本（不低于1.2.2），但是不安装 1.3.x，也就是说安装时不改变大版本号和次要版本号。...需要注意的是，如果大版本号为 0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。 latest：安装最新版本。...当我们使用比如 npm install package -save 安装一个依赖包时，版本是插入号形式。这样每次重新安装依赖包 npm install 时”次要版本“和“小版本”是会拉取最新的。

3.5K5 0

CSS预处理器之Sass

default; .container { border-color: $color; } ⑤ Sass 导入@import ✅ 5.1 css 中的导入方法 @import url('public.css...当你在其他 Sass 文件中使用 @import 导入 _public.scss 文件时，只会将其中的变量和混合器等内容引入到当前文件中，而不会生成额外的 CSS 输出。...例如，在另一个 Sass 文件中导入 _public.scss 文件： @import 'path/to/_public.scss'; /* 在这里可以使用 _public.scss 中定义的变量和混合器...运算符的基本使用 ✅ 8.1 等号操作符所有数据类型都支持等号运算符 ==、!...纯数字、百分号、css 部分单位可以使用如下操作符作为运算 +、-、*、/、% 8.3.1 + .container { width: 50 + 20; width: 50 + 20%

1101 0

知乎高赞：什么是前端工程化

我试图从工程（构建）工具对比和一个线上 bug 的处理来侧面说明。...工具篇提到工程化（构建）工具，作为经验丰富的前端开发者，相信你能列举出不同时代的代表：从 Browserify + Gulp 到 Parcel，从 Webpack 到 Rollup，甚至 @尤雨溪编写的...扩展运算符；出错的代码（使用了扩展运算符的代码）属于某个公共库代码，它没有使用 Babel 插件进行降级处理，因此线上源代码出现了 ... 扩展运算符。...模块而引发误判（微信搜索公众号逆锋起笔，关注后回复编程资源，领取各种经典学习资料）。.../node_modules/module-name/library-name/name.common.js', // 使用的第三方库 sourceType: 'unambiguous'

8272 0

腾讯 IMWeb 团队的前端构建秘籍

plugin不展开讨论，因为插件太多了。...五、其他经验关于node-sass 用过node-sass的童鞋应该遇到过，安装node-sass遇到各种编译错误、二进制文件下载错误、甚至文件写入权限错误等等。...于是就出现想通过postcss插件去兼容sass语法，虽然通过插件能够兼容部分语法，但是想要在已经有一定量的业务代码中，替换node-sass的风险是非常高的，本人亲自测试各种坑当然也有其他途径解决这个问题...但其他的less、sass这种预处理器，就难以介入它的处理过程，只能按照它既定的规则处理。...如果你使用了 css-loader的import能力，同时有使用了 post-css-import插件的import能力，两个插件会存在冲突，不建议同时使用！

1.4K3 0

京东快递H5项目接入vite实战

由于目前未考虑在正式环境中使用vite进行构建，因此接入过程中需要考虑与现有打包方式的兼容问题。...@jd/pandora-mobile （京东物流内部组件库）组件兼容问题，组件库默认导出方式与 vite 打包不兼容（具体原因可以参考vite issue），解决方案是通过路径别名将 @jd/pandora-mobile...@jd/pandora-mobile 组件库样式文件导入不生效，解决方案有两种，一种是通过配置 css 预处理插件配置（preprocessorOptions）将组件库样式添加为额外的全局样式，但是这种方案可能存在样式优先级的问题...webpack方式进行打包时会由于 pandora 组件库与 sass（dart-sass）不兼容导致打包失败。...loaderOptions: { // ... // sass-loader 优先使用 sass , pandora sass 兼容有问题 implementation

3451 0

使用Webpack来做自己的cra脚手架

当然Babel还有其他的转换功能。比如，在React/Vue中的JSX(JavaScript XML)语法也可以通过babel/preset-react 插件来实现。...下面再看module，这里是使用了babel-loader来进行编译我们的js文件并且它存在于我们的node_modules文件夹下。...最后一步：我们将webpack的各种css预编译器安装上 npm install style-loader css-loader sass-loader node-sass --save-dev 于是重新改写我们的...，是根据use中的数组，从右开始使用。...然后可以根据webpack的教程加入eslint和file-loader等文件来进行eslint的检查或者是项目中文件的使用。

8634 0

新一代构建工具(1)：对比rollupparcelesbuild—esbuild脱颖而出

自动转换：如若有需要，Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码.零配置代码分拆：使用动态import()语法, Parcel 将你的输出文件束...Webpack慢的核心原因Webpack 之所以有时感觉很慢，是因为代码转译全靠 loader 进行字符串处理。...由于所有线程共享内存，因此当捆绑导入同一JavaScript库的不同入口点时，可以轻松地共享工作。大多数现代计算机具有多内核，因此并行性是一个巨大的胜利。...TSC 实现 ts 代码转译与代码检查使用 less、stylus、sass 等 css 预处理工具我们已经完全习惯了这种方式，甚至觉得事情就应该是这样的，大多数人可能根本没有意识到事情可以有另一种解决方案...档案依旧可以使用Babel，TypeScript，Sass 编译然后由浏览器个别载入，也就是当您变更档案时Snowpack 只会重新编译该档，然后只重新载入该档。

2.4K2 0

多端多页面项目Webpack打包实践与优化

Mode 有两个值：development 或者是 production，默认值是 production。...因为webpack对于loader的调用是从右往左的，所以配置如下： { // 增加对 SCSS 文件的支持 test: /\.scss|\.css/, // SCSS 文件的处理顺序为先 sass-loader...', }, ],}, 如果你也使用了sass-loader，有个问题可能需要注意。...当你的index.scss里@import了其他scss文件比如a.scss时，如果a.scss里使用了url(),且里面的路径是相对路径，那么在sass-loader 处理过后给css-loader处理时就会报错...第一种，也是推荐选择的方式是，使用符合 ECMAScript 提案的 import() 语法来实现动态导入。

1.8K3 0

webpack配置优化,让你的构建速度飞起

/, // 排除node_modules代码不编译 include: path.resolve(__dirname, "...../, // 排除node_modules代码不编译 include: path.resolve(__dirname, "...../, // 排除node_modules代码不编译 include: path.resolve(__dirname, "...../, // 排除node_modules代码不编译 include: path.resolve(__dirname, "...../, // 排除node_modules代码不编译 include: path.resolve(__dirname, "..

2.3K1 0

webpack配置优化,让你的构建速度飞起_2023-02-28

/, // 排除node_modules代码不编译 include: path.resolve(__dirname, "...../, // 排除node_modules代码不编译 include: path.resolve(__dirname, "...../, // 排除node_modules代码不编译 include: path.resolve(__dirname, "...../, // 排除node_modules代码不编译 include: path.resolve(__dirname, "...../, // 排除node_modules代码不编译 include: path.resolve(__dirname, "..

2.1K1 0

【学习笔记】尚硅谷Webpack5入门到原理 | 高级篇

/node_modules/less-loader/dist/cjs.js");/***/ }),// 其他省略所有 css 和 js 合并成了一个文件，并且多了其他代码。..., // 排除node_modules代码不编译 include: path.resolve(__dirname, ".....\optipng-bin\vendor\optipng.exe ENOENT我们需要安装两个文件到 node_modules 中才能解决, 文件可以从课件中找到：jpegtran.exe需要复制到 node_modules.../, // 排除node_modules代码不编译 include: path.resolve(__dirname, ".....就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。

3.1K2 0

React.js基础知识总结一

CSS样式或者IMG图片等内容，我们有两种方式： 1.在JS中基于ES6 Module模块规范，使用import导入，这样webpack在编译合并JS的时候，会把导入的资源文件等插入到页面的结构中（绝对不能在.../或者…/，导入资源，因为在webpack编译的时候，地址就不在是之前的相对地址了） 2.如果不想在JS中导入（JS中导入的资源最后都会基于WEBPACK编译），我们也可以把资源手动的在HTML中导入，...但是HTML最后也要基于WEBPACK编译，导入的地址也不建议写相对地址，而是使用 %PUBLIC_URL% 写成绝对地址 <link rel="manifest" href="%PUBLIC_URL%...中即可 2.在JSX中出现的{}是存放JS的，但是要求JS代码指执行完成有返回结果（JS表达式） ->不能直接放一个对象数据类型的值(对象（除了给style赋值）、数组（数组中如有没有对象，都是基本值<em>或者是</em>...JSX元素，这样是可以的）、函数都不行) ->可以是基本类型的值（布尔类型什么都不显示、null、undefined也是JSX元素，代表的是空） ->循环判断的语句都不支持，但是支持三元<em>运算符</em> 3.循环数组创建

1.8K3 0

聊聊NPM镜像那些险象环生的坑

平常大家都会使用node-sass作为项目开发依赖，但是node-sass的安装一直都是一个令人头疼的问题。...然而办法总比困难多，从node-sass的官方文档中可找到一个叫sass_binary_site的参数，它可设置Sass镜像地址，毫无疑问还是将其指向国内的淘宝镜像。...node-sass安装失败的原因其实并不止上面提到的情况，我们可从安装过程中分析并获取突破口来解决问题。根据npm i node-sass的输出信息来分析，可得到下面的过程。...检测项目node_modules的node-sass是否存在且当前安装版本是否一致「Yes」：跳过，完成安装过程「No」：进入下一步从「NPM」上下载node-sass 检测全局缓存或项目缓存中是否存在...在Mac系统和Linux系统上删除node_modules比较快，但是在Windows系统上删除node_modules就比较慢了，推荐大家使用rimraf删除node_modules，一个Node版的

5K5 1

HBuilderX的介绍与语法提示

目录介绍语法提示代码助手语法帮助编辑器与项目管理器的同步多光标列选择着色高亮文件快速打开目录内搜索缩进调整语法校验 svn/git项目导入预编译器(less/sass) sass...着色高亮当你打开一个不认识的文档时，即hx的无法高亮着色，可以在右下角选择使用其他编辑器打开。当你打开一个文件编码错乱，产生乱码时，也可以在右下角选择编码重新打开。...（如下图示例）校验概要结果会显示在状态栏，比如有2个错误（如下图），可以按F4切换到不同的错误处，画有红波浪线（如下图），鼠标移到红波浪线上会显示具体的错误信息。...（如下图示例） svn/git项目导入以git为例：（git项目：需要安装git插件、以及TortoiseGit、并配置ssh秘钥）（如下图示例）预编译器(less/sass) ...sass示例：（如下图示例）预编译器安装后使用入口在外部命令菜单中 sass/less插件配置小技巧： less、sass可以在插件配置里，配置为保存文件时自动编译。

3.1K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭