使用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/" //生成之后存放的路径
}
}
]
}
]