在前端vue2项目下，如果直接像普通css那样使用meidia query，是不起作用的
需要安装sass和sass-loader
在package.json中指定一下依赖，一定要注意版本，经过我的测试我现在这个版本是不报错的，其他的新版本是各种报错
"sass": "^1.56.0",
"sass-loader": "^7.3.1",
{
"name": "default",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^1.1.3",
"core-js": "^2.6.5",
"element-ui": "^2.15.10",
"sass": "^1.56.0",
"sass-loader": "^7.3.1",
"vue": "^2.6.10",
"vue-router": "^3.6.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}
}
npm install一下
然后 npm run serve
vue文件中使用案例
<style lang="scss">
.chatCenter {
background: #fff;
max-width: 900px;
margin: 0 auto;
box-shadow: 2px 2px 6px rgb(0 0 0 / 30%);
border-top: none;
overflow: hidden;
@media screen and (min-width: 900px){
max-height: 780px;
box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
border-radius: 8px;
}
}
.visitorBody {
height: 100vh;
background-color: #eef0f6;
@media screen and (min-width: 900px){
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
标签：vue,900px,cli,sass,media,报错,vue2 From： https://www.cnblogs.com/taoshihan/p/16863610.html