Webpack打包css

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

### 1、编写src/css/main.css ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70][] ###

#app a{
        display: inline-block;
        width: 150px;
        line-height: 30px;
        background-color: dodgerblue;
        color: white;
        font-size: 16px;
        text-decoration: none;
    }
    #app a:hover{
        background-color: whitesmoke;
        color: dodgerblue;
    }
    #app div{
        width: 300px;
        height: 150px;
    }
    #app{
        width: 305px;
        border: 1px solid dodgerblue;
    }

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

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

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 1][] ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 2][] ###

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

import './css/main.css'

import Vue from '../node_modules/vue/dist/vue';
    import VueRouter from '../node_modules/vue-router/dist/vue-router'
    import loginForm from './js/login'
    import registerForm from './js/register'
    import './css/main.css'
    Vue.use(VueRouter)
    
    // 创建VueRouter对象
    const router = new VueRouter({
        routes:[ // 编写多个路由规则
            {
                path:"/login", // 请求路径
                component:loginForm // 组件名称
            },
            {
                path:"/register",
                component:registerForm
            },
        ]
    })
    var vm = new Vue({
        el:"#app",
        components:{// 引用登录和注册组件
            loginForm,
            registerForm
        },
        router
    })

### 4、重新打包 ###

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

### ![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][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70]: /images/20220406/d5f421dea4d44cfa84367fbf1fde8da6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 1]: /images/20220406/63a3b88d47004203ad1ada814887ba27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 2]: /images/20220406/fd43a77632bb41aaa275f105ea65246d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 3]: /images/20220406/9b78918606064fc2990184f9759f7118.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 4]: /images/20220406/2a5e4879c02c41788a4caaab4f8c49a7.png