加载 CSS 文件
- 第一步： 安装 css 和 style 模块解析的依赖
style-loader和css-loader
npm install --save-dev style-loader css-loader #获取 npm i -D style-loader css-loader
F:\git\webpack4>npm i -D style-loader css-loader
npm WARN rollback Rolling back readable-stream@2.3.6 failed (this is probably harmless): EPERM: operation
not permitted, lstat 'F:\git\webpack4\node_modules\fsevents\node_modules'
npm WARN webpack4@1.0.0 No description
npm WARN webpack4@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darw
in","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ style-loader@0.23.1
+ css-loader@3.0.0
added 14 packages in 34.906s
- 第二步： 添加 css 解析的 loader
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
-
css-loader： 辅助解析 js 中的import './main.css' -
style-loader: 把 js 中引入的 css 内容 注入到 html 标签中，并添加 style 标签.依赖css-loader
你可以在依赖于此样式的 js 文件中 导入样式文件，比如：import './style.css'。现在，当该 js 模块运行时，含有 CSS 字符串的
<style>标签，将被插入到 html 文件的<head>中。
- 第三步： 编写 css 文件和修改 js 文件
在 src 目录中添加 style.css文件
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
+ |- style.css
|- index.js
|- /node_modules
src/style.css
.hello {
color: red;
}
修改 js 文件
import _ from 'lodash';
+ import './style.css';
function createDomElement() {
let dom = document.createElement('div');
dom.innerHTML = _.join(['aicoder', '.com', ' wow'], '');
+ dom.className = 'hello';
return dom;
}
document.body.appendChild(createDomElement());
最后重新打开 demo目录下的 index.html 看一下文字是否变成了红色的了。
网友评论