webpack--CSS模块化

最新推荐文章于 2024-02-13 14:07:15 发布

小毛贼_哪里逃

最新推荐文章于 2024-02-13 14:07:15 发布

阅读量162

点赞数

分类专栏： webpack vue

本文链接：https://blog.csdn.net/qq_28497823/article/details/105271188

版权

vue 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

webpack

10 篇文章 0 订阅

订阅专栏

1 app.css

body{
  background: red
}
.ot{
  background: #fff
}

2 style.css

.ot{
  font-size: 50px;
}

3 main.js引入CSS文件

import React from 'react';
import ReactDOM from 'react-dom';

import appcss from './app.css';
import stylecss from './style.css'

import 'font-awesome/css/font-awesome.css';

ReactDOM.render(
  <div className={stylecss.ot}>
    <i className="fa fa-rocket"></i>
    <span className={appcss.ot}>React</span>
  </div>,
  document.getElementById("root")
);

4 配置：需要排除公共CSS，比如引入的font-awesome字体图标

module:{
    rules:[
      {
        test: /\.css$/,
        use:['style-loader',{
          loader: "css-loader",
          options: {
            module: true,
            localIdentName: "[path][name]-[local]-[hash:base64:6]"
          }
        }],
        exclude:[
          path.resolve(__dirname,"node_modules")
        ]
      },
      {
        test: /\.css$/,
        use:['style-loader',"css-loader"],
        include:[
          path.resolve(__dirname,"node_modules")
        ]
      },
... ...

5 index.html

<html>
<head>
  <title>自定义模板</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

6 测试：模块化的css和公共css都生效了

最后附上依赖：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack",
    "start": "webpack-dev-server --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.8.2"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "font-awesome": "^4.7.0"
  }
}

小毛贼_哪里逃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack--CSS模块化

1 app.cssbody{ background: red}.ot{ background: #fff}2 style.css.ot{ font-size: 50px;}3 main.js引入CSS文件import React from 'react';import ReactDOM from 'react-dom';import appc...
复制链接

扫一扫