sass使用相关报错

1. 移动端一像素边框的缩放，我创建了三个文件：mixin.scss ， base.scss，index.scss

在index.scss里面引入全局样式文件，

在base.scss文件中编写 根据媒体查询设置不同的缩放比例，报错如下：

 

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio:1.5){
   .border-1px{
       &::after{
          -webkit-transform:scaleY(0.7)
          transform:scaleY(0.7)
       }
    }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio:2){
     .border-1px{
        &::after{
            -webkit-transform:scaleY(0.5)
            transform:scaleY(0.5)
        }
     }
}

以为是媒体查询的方式写的有问题，以上是代码，查了sass媒体查询的相关文档，未找到原因。。。。。。

 

[HMR] bundle has 1 errors
client.js?7955:161 ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./src/style/index.scss
Module build failed:
undefined
^
Media query expression must begin with '('
in D:\WTL-studyMaterial\study_notes\mooc\vue_eleme\eleme_rewrite\src\style\index.scss (line 2, column 1)
@ ./src/style/index.scss 4:14-143 13:3-17:5 14:22-151
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

最后，看到上面标红的部分，再去看了index.scss文件，

@import "./mixin"
@import "./base"

猜想是不是因为没写分行啊；加上分好，未报错。。。。。。

走弯路原因：  模块创建错，而且报错信息直指media查询需要以{开头，，后来想了想，可能是因为加载的时候由于没有分好，加载在一起的时候css代码没分割导致的。

总之，做事情，不一定只看局部，需要追溯。