在项目中为 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.