使用webpack和sass打包@media 放在两个scss文件无效,怎么解决?

使用webpack和sass打包

这个@media属性放在两个scss文件中,但是只是其中一个文件有效,怎么让@media在两个文件都有效

@media  screen and (max-width: 750px) {
    /* body{ background: #f00;} */
    .footer_div {
        height: 496px;
        .wrap, .left_margin, .right_margin {
            display: none;
        }
    }
    .wrap_phone {
        display: block;
        .phone_logo {
            background: url('../images/logo-1.svg') center no-repeat;
            width: 161px;
            height: 35px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 30px;
        }
        .phone_word {
            display: flex;
            width: 170px;
            justify-content: center;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
            
        }
        .contact_information {
            font-size: 14px;
            color: rgba( 255, 255, 255, 1);
            margin-top: 30px;
        }
        .email {
            font-size: 14px;
            color: rgba( 165, 169, 195, 1 );
            margin-top: 15px;
        }
        .telephone {
            font-size: 14px;
            color: rgba( 165, 169, 195, 1 );
            margin-top: 10px;
        }
        .join_us {
            font-size: 14px;
            margin-top: 30px;
            color: rgba( 255, 255, 255, 1);
        }
        .quick_response_code {
            background: url('../images/QuickResponseCodePhone.png') center no-repeat;
            height: 165px;
            width: 165px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
        }
        
        .company_information {
            width: 280px;
            font-size: 14px;
            margin-top: 41px;
            color: rgba( 165, 169, 195, 1 );
        }
    }
    
    .phone_home_middle {
        .wrap, .left_margin, .right_margin {
            display: none;
        }
        .home_phone_wrap {
            display: block;
        }
    }
}
module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'css-loader',
                    'sass-loader'
                ],
            },
            {
                test:/\.(png|svg|jpg|gif|ico|woff|eot|ttf)$/,
                exclude: /(public)/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {

                            limit:8000000,   //小于50K的 都打包

                            name:'[hash:8].[name].[ext]',
                            // publicPath:"img/",  //替换CSS引用的图片路径 可以替换成爱拍云上的路径
                            // outputPath:"../img/"        //生成之后存放的路径
                        }
                    }
                ]
            }
        ]
阅读 4k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题