在项目中为 scss 或 less 文件启用模块化2|学习笔记

简介: 快速学习在项目中为 scss 或 less 文件启用模块化2

开发者学堂课程【React 入门与实战在项目中为 scss 或 less 文件启用模块化2】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/585/detail/8115


在项目中为 scss 或 less 文件启用模块化2


目录:

二、在项目中启用模块化并同时使用 bootstrap



二、在项目中启用模块化并同时使用 bootstrap

1.把自己的样式表,定义为.scss 文件

2.第三方的样式表,还是以.css 结尾

3.我们只需要为自己的.scss 文件,启用模块化即可;

4.运行 cnpm i sass-loader node-sass -o 安装能够解析 scss 文件的 loader

举例:

//其中,有个固定的参数,叫做 modules ,表示为普通的 css 样式表,启用模块化

{ test: /.css$/, use: [ 'style-loader ', 'css-loader']}

//打包处理 CSS 样式表的第三方 loader

{test: /\.ttflwofflwoff2|eotlsvg$/, use: 'url-loader' },

//打包处理字体文件的 loader

{ test:/ \.scss$/, use: [ 'style-loader ', 'css-loader ?modules &local Ident Name=[path][name ]-[local]-[hash:5]', 'sass-loader'] }

//打包处理 scss 文件的 loader

执行结果:

{title: "src-css-cmtitem-title-5df8 b"content:"src-css-cmtitem-content-fc5ee", cmtbow:"src-css-cmtiterm-cmtbox-f2f55""}

{title: "src-css-cmtlist-title-66e92"}

{}

[WDS] Hot Nodule Replacement enabled.

相关文章
|
7月前
|
JavaScript
Vue组件选项编写代码的特点和注意事项
Vue组件选项编写代码的特点和注意事项
41 2
|
7月前
|
敏捷开发 人工智能 前端开发
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
|
JavaScript 前端开发
带你读《现代TypeScript高级教程》六、命名空间和模块(1)
带你读《现代TypeScript高级教程》六、命名空间和模块(1)
|
安全 API CDN
搭建Vue3组件库:第十五章 如何编写README文档
本章介绍如何正确编写项目的README文档
743 0
搭建Vue3组件库:第十五章 如何编写README文档
|
4月前
|
前端开发 开发者
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。本文阐述 DefinePlugin 的原理、用法及案例,包括安装配置、具体示例(如动态加载资源、配置接口地址)和注意事项,帮助开发者更好地利用此插件优化项目。
133 0
|
7月前
|
前端开发
【专栏】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译
【4月更文挑战第29天】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译。通过配置键值对,如 `ENV: JSON.stringify(process.env.NODE_ENV)`,可以在代码中根据环境执行相应逻辑。实际应用包括动态加载资源、动态配置接口地址和条件编译优化代码。注意变量定义的合法性和避免覆盖,解决变量未定义或值错误的问题,以提升开发效率和项目质量。
372 3
|
7月前
|
JavaScript IDE 编译器
TypeScript中模块路径解析与配置:深入剖析与最佳实践
【4月更文挑战第23天】本文深入探讨了TypeScript中模块路径解析的原理与配置优化,包括相对路径、Node.js模块解析和路径别名。通过配置`baseUrl`、`paths`、`rootDirs`以及避免裸模块名,可以提升开发效率和代码质量。建议使用路径别名增强代码可读性,保持路径结构一致性,并利用IDE插件辅助开发。正确配置能有效降低维护成本,构建高效可维护的代码库。
|
7月前
|
JavaScript 前端开发
除了ES6的模块导出语法,还有哪些其他的方式可以在Vue项目中进行模块化开发?
除了ES6的模块导出语法,还有哪些其他的方式可以在Vue项目中进行模块化开发?
37 2
|
JavaScript 前端开发
《现代Typescript高级教程》命名空间和模块
命名空间和模块 命名空间(Namespace) 在 TypeScript 中,命名空间是一种将代码封装在一个特定名称下的方式,以防止全局作用域污染并避免命名冲突。命名空间在 TypeScript 中非常重要,因为它们为模块化和封装提供了灵活的选项。 创建命名空间的语法如下:
123 0
|
JavaScript 前端开发
带你读《现代TypeScript高级教程》六、命名空间和模块(2)
带你读《现代TypeScript高级教程》六、命名空间和模块(2)