引入PostCSS插件配置出现的问题（模块化问题）

已于 2024-01-05 17:51:40 修改
阅读量424 收藏 9
点赞数 10
文章标签： postcss 前端 javascript node.js
于 2024-01-05 17:46:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nana18874597151/article/details/135414859
版权

引入的插件配置如下图

然后运行之后发现一个报错

然后查看红色框里面的内容，意思是：此文件被视为ES模块，因为它具有“。js”文件扩展名和“C:\Users\na\Desktop\consult-patient\package”。Json '包含"type": "module"。要将其视为CommonJS脚本，请将其重命名为使用`。Cjs文件扩展名。

这时候去查看package.json里面的配置

查找资料发现，"type": "module" 是将 .js结尾或没有任何扩展名的文件将作为ES模块进行加载，

type字段的默认值为 commonjs，即无扩展名的文件和.js结尾文件将被视为commonjs

这时候直接去掉"type": "module"这一行代码即可

具体原因，请查看下面这一篇文章（JavaScript模块化开发，讲解了CommonJS和ES的区别）

http://t.csdnimg.cn/b9sjI

na努力学习前端
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ES Module 和 CommonJS 学习笔记（二） —— NodeJS 中使用 ESM 和 CJS
angry_rooster的博客
01-29 3699
在 NodeJS 中使用 ES6 模块 当前较新版本的 NodeJS 支持 ESM 和 CJS ，但默认使用的是 CJS 规范去解析 JS 代码，直接使用 CJS 是没有任何问题的，而使用 ESM 需要做一些处理 .mjs文件 在 NodeJS 中用.mjs后缀的文件名表示这个文件为 ES6 模快文件，可以在.mjs文件中直接使用 ESM 语法（使用import/export指令）。在执行含 ES6 模块的脚本时，由于不同 NodeJS 版本的支持程度不一样，需要按照不同方式执行 v16.4.0 完全支持
postcss-nested-ancestors::family_woman_girl_boy: PostCSS 插件，用于引用嵌套 CSS 中的任何父级选择器
07-24
PostCSS 嵌套祖先引入了^&选择器，它使您可以通过简单且可自定义的界面引用任何父祖先选择器。 这个插件应该在像这样的 PostCSS 规则解包器之前使用。 有关您的环境的示例，请参阅文档。 祖先选择器模式 .level-...
Failed to load PostCSS config: Failed to load PostCSS config (****):: [ReferenceError] module is not
zwh2487577416的博客
01-19 2491
Failed to load PostCSS config: Failed to load PostCSS config (****)::[ReferenceError] module is not defined in ES module scope This file is being treated as an ES module because it has a '.js' file extension and
import 的时候就报错SyntaxError
m0_57969553的博客
02-15 378
from A import B时报错SyntaxError: (unicode error) 'utf-8' codec can't decode byte 0xb4 in position 0: invalid start byte。后可以运行，用来确保所有的源文件（包括主程序和子程序）都采用相同的编码格式，最好是 UTF-8。您可以将所有的源文件都指定使用 UTF-8 编码格式。这样可以确保所有的源文件都以相同的编码格式进行解析，从而避免编码错误。解决方法：只在主程序里加了。
vue3代码运行报错 No matching export in “node_modules/.pnpm/vue-demi@0.14.6_vue@3.2.47/node_modules/vue-dem
weixin_48230016的博客
05-13 563
vue3代码运行报错 No matching export in “node_modules/.pnpm/vue-demi@0.14.6_vue@3.2.47/node_modules/vue-dem vue版本和pinia版本不兼容导致，因为vue版本"vue": "3.2.37"，pinia版本"pinia": “^2.0.14”，这两个版本不兼容。
解决postcss、postcss-loader 和less-loader 导致的报错问题
热门推荐
筱竹的博客
03-19 1万+
这里写自定义目录标题欢迎使用Markdown编辑器一、问题背景介绍二、报错问题分析： 欢迎使用Markdown编辑器 解决 Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. 一、问题背景介绍 1、在Vue的项目中使用了postcss-pxtorem这个包，同时在项目根目录中，配置了postcss.config.js,如下图所示： module.exports = { plugins: { 'autopr
进阶篇：postcss的插件机制
广漂程序猿DevinRock
11-07 622
在讲解postcss中插件机制之前，我们先来看一下在日常的工作是如何使用postcss的，了解postcss具体能干哪些事。虽然postcss在为我们提供了完整的命令系统帮助我们使用，但在日常的开发中如果单纯的使用postcss可能意义不大，因此我们一般是与打包工具进行配合一起在项目中使用，目前主流的前端打包工具有：webpack 和 vite。下面我们就以webpack为例演示一下如何在其使用postcss。
CSS——PostCSS简介
mantou_riji的博客
02-27 1379
PostCSS不是像Sass或Less一样的样式处理器，他没有自定义的语法和语义，它实际上不是一种语言，而是一种CSS语法转换的工具。PostCSS与CSS一起使用，任何有效的CSS都可以由PostCSS处理。PostCSS是CSS语法转换的工具，允许自定义CSS的语法，这些语法可以被插件理解和转换。在 CSS 中查找某些内容（例如，will-change 属性）。更改找到的元素（例如，在 will-change 之前插入 transform: translateZ(0) 作为旧浏览器的填充）。
6个很棒的PostCSS插件，让您成为一个CSS向导
前端岚枫
03-27 1768
PostCSS是一个非常通用的工具，它可以通过javascript插件转换CSS样式。它的灵活性在于它的建造方式。 PostCSS的核心部分是一个node.js模块，您可以使用NPM进行安装，它有一个由200多个插件组成的生态系统，您可以在项目中选择使用这些插件。 PostCSS既不是预处理器，也不是后处理器，因为不同的PostCSS插件可能属于这两类中的任何一类，或者同时属于这两类；它完全取决于...
详细解读CSS的预编译器PostCSS
09-25
1. **Autoprefixer**：这是一个非常流行的PostCSS插件，自动为CSS属性添加浏览器特定的前缀，确保跨浏览器兼容性。它依赖于Can I Use的数据来决定哪些前缀是必要的。 2. **postcss-nested** 和 **postcss-mixins**...
vue中rem的配置的方法示例
10-18
此外，由于`px2rem-loader`是在构建时转换px，所以对于运行时的动态CSS（如Vue的`:style`指令），可能需要使用CSS预处理器（如Sass/Scss）配合`postcss-px2rem`插件来实现转换。 最后，为了实现更好的跨设备兼容性...
doc解决跨域问题.pdf
12-18
在这些配置文件中，定义了目标环境、入口、输出、模块规则、外部模块、插件等配置项。 总的来说，这个文档涵盖了从项目初始化、路由处理、跨域问题解决、请求数据解析到静态资源服务，以及开发环境配置等多个方面，...
webpack与SPA实践之管理CSS等资源的方法
08-28
Webpack 与单页应用（SPA）实践：管理CSS资源的方法 在现代前端开发中，Webpack 是一个关键...在实际项目中，还可以根据需求进一步配置 CSS 预处理器（如 Sass、Less），以及 PostCSS 插件，以实现更强大的 CSS 功能。
css终极方案PostCSS
weixin_43390711的博客
07-24 608
所有的css框架都在一样的事，那就是由一个css生成一个新的css，那么postcss就来做了一个抽离：1、将原有的css解析成抽象语法树2、中间经过若干个插件3、重新文本化，形成新的css。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 478
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1472
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 584
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
postcss-pxtorem插件配置
08-30
postcss-pxtorem插件的配置可以通过在vue.config.js配置文件中引入并设置相关参数实现。在plugins选项中添加postcss-pxtorem插件，并在该插件的配置中设置rootValue和propList属性。其中，rootValue属性用于指定转换...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值