Webpack打包css

太过爱你忘了你带给我的痛 2022-04-06 08:08 437阅读 0赞

1、编写src/css/main.css

" class="reference-link">watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70

  1. #app a{
  2.     display: inline-block;
  3.     width: 150px;
  4.     line-height: 30px;
  5.     background-color: dodgerblue;
  6.     color: white;
  7.     font-size: 16px;
  8.     text-decoration: none;
  9. }
  10. #app a:hover{
  11.     background-color: whitesmoke;
  12.     color: dodgerblue;
  13. }
  14. #app div{
  15.     width: 300px;
  16.     height: 150px;
  17. }
  18. #app{
  19.     width: 305px;
  20.     border: 1px solid dodgerblue;
  21. }

2、安装加载器、webpack默认只支持js加载

  1. npm install style-loader css-loader --save-dev

" class="reference-link">watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 1

" class="reference-link">watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 2

3、将main.css 加入到main.js主入口文件里

  1. import './css/main.css'
  3. import Vue from '../node_modules/vue/dist/vue';
  4. import VueRouter from '../node_modules/vue-router/dist/vue-router'
  5. import loginForm from './js/login'
  6. import registerForm from './js/register'
  7. import './css/main.css'
  8. Vue.use(VueRouter)
  10. // 创建VueRouter对象
  11. const router = new VueRouter({
  12.     routes:[ // 编写多个路由规则
  13.         {
  14.             path:"/login", // 请求路径
  15.             component:loginForm // 组件名称
  16.         },
  17.         {
  18.             path:"/register",
  19.             component:registerForm
  20.         },
  21.     ]
  22. })
  23. var vm = new Vue({
  24.     el:"#app",
  25.     components:{// 引用登录和注册组件
  26.         loginForm,
  27.         registerForm
  28.     },
  29.     router
  30. })

4、重新打包

  1. 再次输入打包指令：npx webpack --config webpack.config.js

" class="reference-link">watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 3

5、测试

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 4

发表评论

表情：
评论列表 （有 0 条评论，437人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Webpack打包

    1、什么是Webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sc

    爱被打了一巴掌爱被打了一巴掌/ 0 赞/ 398 阅读

    相关 webpack打包

    进入工作空间,npm run build,打一下生产的包 打包完之后,会生成一个dist目录   ![70][] static是静态文件的存放地址 在config目录

    ╰半夏微凉°╰半夏微凉°/ 0 赞/ 442 阅读