css loader

最新推荐文章于 2023-11-09 15:46:06 发布

weixin_34401479

最新推荐文章于 2023-11-09 15:46:06 发布

阅读量957

点赞数 1

文章标签： webpack javascript ViewUI

原文链接：https://juejin.im/post/5cc15a3de51d456e5633de1d

版权

webpack cssloader

Webpack允许在JS文件中包含CSS，需要CSS-loader对这些CSS进行处理
main.js

require('./app.css');
复制代码复制代码

app.css

body {
  background-color: blue;
}
复制代码复制代码

index.html

<html>
  <head>
    <script type="text/javascript" src="bundle.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
复制代码复制代码

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules:[
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
    ]
  }
};
复制代码复制代码

注意！必须使用两个加载器来转换CSS文件。CSS-loader用来读取CSS文件来转换，另一个Style-loader用来往HTML中插入<style>标签。
然后打开server

$ cd demo04
$ npm run dev
复制代码复制代码

事实上，Webpack将CSS文件的内容直接插入到index.html

<head>
  <script type="text/javascript" src="bundle.js"></script>
  <style type="text/css">
    body {
      background-color: blue;
    }
  </style>
</head>复制代码

原文链接：https://juejin.im/post/5b42d4dce51d45195c070cd0
其实将app.css文件内容通过css loader解析之后，

然后通过style loader插入到html文件之中，

最后打包完的文件，只有html和js文件，

bundle.js里面包含写style标签和写入样式内容

转载于:https://juejin.im/post/5cc15a3de51d456e5633de1d

weixin_34401479

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css loader

webpack cssloaderWebpack允许在JS文件中包含CSS，需要CSS-loader对这些CSS进行处理main.jsrequire('./app.css');复制代码复制代码app.cssbody { background-color: blue;}复制代码复制代码index.html<html> <head> <scr...
复制链接

扫一扫