@supportsがビルドされない
Edge対策でハックが必要になったのでSCSSに下記記述をしてビルドしても
出力されたCSSになぜか@supportsで囲われたブロックがきれいに消えるという現象。
Hack for Edge
@supports (-ms-ime-align: auto) {
/* スタイルセット */
}
環境
package.json
{
"name": "localtest",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true,
"engines": {
"node": "8.11.3"
},
"browserify-shim": {
"jquery": "$"
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.js"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"dependencies": {
"browserify": "^16.2.2",
"browserify-shim": "^3.8.14",
"jquery": "~3.2.1"
},
"devDependencies": {
"es6-promise": "*",
"eslint": "*",
"eslint-plugin-es5":"^1.3.1",
"gulp": "*",
"gulp-autoprefixer": "*",
"gulp-clean-css": "*",
"gulp-concat": "*",
"gulp-load-plugins": "^1.5.0",
"gulp-merge-media-queries": "*",
"gulp-plumber": "*",
"gulp-postcss": "^7.0.0",
"gulp-rename": "*",
"gulp-sass": "*",
"gulp-sourcemaps": "^2.6.4",
"gulp-stylelint": "^7.0.0",
"gulp-uglify": "*",
"postcss-reporter": "*",
"postcss-scss": "*",
"run-sequence": "^2.2.1",
"stylelint": "^9.2.0",
"stylelint-config-sass-guidelines": "*",
"stylelint-config-standard": "*",
"stylelint-scss": "*",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
"scripts": {
"watch": "gulp",
"sass": "gulp sass",
"js": "gulp js",
"deploy": "gulp deploy",
"lint": "eslint src"
}
}
原因
gulp-merge-media-queries
でメディアクエリ記述をまとめていたのですが、これが@supports
の部分を無視(?)してくれていたようです。
- 参考記事
gulp media queries まとめる系プラグインで @supports が消えてる件
対策
記事にあるようにgulp-merge-media-queries
の代わりにgulp-group-css-media-queries
を利用することで解決
Author And Source
この問題について(@supportsがビルドされない), 我々は、より多くの情報をここで見つけました https://qiita.com/yyzzyykk/items/e4014da550a014fbab2c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .