css /less/sass模块化与 babel-plugin-react-css-module

最新推荐文章于 2024-08-21 09:43:00 发布

置顶

SarinaDu

最新推荐文章于 2024-08-21 09:43:00 发布

阅读量1.3k

点赞数 2

分类专栏： css css-module 文章标签： css

本文链接：https://blog.csdn.net/m0_37148591/article/details/105114940

版权

本文介绍了CSS模块化的概念，旨在解决全局CSS问题，并详细阐述了如何使用babel-plugin-react-css-module配合less和sass实现模块化。文章通过实例展示了配置过程，包括webpack和.babelrc的设置，以及在不同CSS预处理器中的应用。同时，讨论了使用该插件后需要注意的问题。

摘要由CSDN通过智能技术生成

前言

日常积累，欢迎指正

正文

什么是 css 模块化?

css-modules

配置

css 模块化最重要的一个目底就是解决 css global 问题，最简单的使用方式就是在 webpack 中配置 cssLoader.modules = true

module.exports = {
   
  module: {
   
    rules: [
      {
   
        test: /\.css$/,
        use: [
          {
   
            loader: 'style-loader',
          },
          {
   
            loader: 'css-loader',
            options: {
   
              // modules: true
              modules: {
   
              	localIdentName: '[path][name]__[local] --[hash:base64:5]',
              }
            }
          },
          {
   
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  },


}

使用

js

import React from 'react'
import  style from './index.css'
export default function Test(){
   
    return <div className = {
   style.container}> 
    {
   /* return <div className = 'container'>  */}
        hello test 
    </div>
}

css

/* Test */
.container {
   
    color: red;
    height: 600px;
    width: 800px;
    background-image: url(../static/images/sunfloewr.png);
}

运行效果

在这里插入图片描述

这样虽然达到了效果却存在一些问题(来自babel-plugin-react-css-modules#css-module):

You have to use camelCase CSS class names. - css 名称必须驼峰命名
You have to use styles object whenever constructing a className. - 必须将 css 导入为样式对象，并用在 className 上
Mixing CSS Modules and global CSS classes is cumbersome. - CSS Modules 和 global CSS 的 class 是混合的
Reference to an undefined CSS Module resolves to undefined without a warning.

babel-plugin-react-css-modules 使用 styleName 属性自动做 CSS Modules,如：