質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%

Q&A

解決済

1回答

2258閲覧

Autoprefixerでベンダープレフィックスを付与したい

kozukata

総合スコア9

0グッド

0クリップ

投稿2020/03/02 23:13

実現したいこと

Webpackを使ってバンドルする際にベンダープレフィックスを付与したい。

前提

現在の作業ディレクトリは以下の通りです。

├── node_modules ├── public │ └── bundle.js ├── src │ ├── app.js │ ├── app.scss │ └── index.html ├── package.json ├── postcss.config.js ├── webpack.config.js └── yarn.lock

各種設定ファイルは以下の通りです。

webpack.config.js

js

1const path = require("path"); 2 3module.exports = { 4 mode: "development", 5 devtool: "none", 6 entry: "./src/app.js", 7 output: { 8 path: path.resolve(__dirname, "public"), 9 filename: "bundle.js" 10 }, 11 module: { 12 rules: [ 13 { 14 test: /.scss$/, 15 use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"] 16 } 17 ] 18 } 19};

postcss.config.js

js

1module.exports = { 2 plugins: [require("autoprefixer")] 3};

エントリーポイントとしているapp.jsは以下の通りです。

import "./app.scss"; console.log("this is a main js file.");

app.jsでインポートしているapp.scssは以下の通りです。

scss

1h1 { 2 font-size: 2em; 3 transition: all 0.3s; 4 color: blue; 5 border-radius: 3px; 6 7 &:hover { 8 transform: translateX(50px); 9 color: red; 10 } 11}

発生している問題

上記の設定でwebpackコマンドを実行したところ、ビルドはエラーなく成功するのですが、バンドルされたJavaScriptファイルでベンダープレフィックスが付与されていません。

exports.push([module.i, "h1 {\n font-size: 2em;\n transition: all 0.3s;\n color: blue;\n border-radius: 3px;\n}\nh1:hover {\n transform: translateX(50px);\n color: red;\n}", ""]);

補足情報

パッケージのバージョンは以下の通りです。

package.json

json

1{ 2 "name": "sample", 3 "version": "1.0.0", 4 "main": "index.js", 5 "license": "MIT", 6 "devDependencies": { 7 "autoprefixer": "^9.7.4", 8 "css-loader": "^3.4.2", 9 "postcss-loader": "^3.0.0", 10 "sass": "^1.26.2", 11 "sass-loader": "^8.0.2", 12 "style-loader": "^1.1.3" 13 }, 14 "dependencies": { 15 "webpack": "^4.41.6", 16 "webpack-cli": "^3.3.11" 17 } 18}

ビルドした際のログ

$ webpack Hash: 005d3818be3ef8a0bc48 Version: webpack 4.42.0 Time: 655ms Built at: 2020-03-03 7:03:50 Asset Size Chunks Chunk Names bundle.js 16.1 KiB main [emitted] main Entrypoint main = bundle.js [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js!./src/app.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js!./src/app.scss 384 bytes {main} [built] [./src/app.js] 62 bytes {main} [built] [./src/app.scss] 644 bytes {main} [built] + 2 hidden modules

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Autoprefixerを使う場合、どのブラウザに対してベンダプレフィックスを使うか指定する必要があります。.browserlistrcファイルに定義しておくなど、適宜定義してください(参考)。


transformborder-radiusにプレフィックスが必要なブラウザはかなり古いものに限られますので、それらをターゲットとしないのであればプレフィックスのないもので問題ない、という結論も考えられます。

投稿2020/03/03 00:28

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kozukata

2020/03/03 13:09

丁寧なご回答誠にありがとうございます。 ご指摘の通り、`.browserlistrc`に古いバージョンのIEを定義してビルドしたところ、期待通りのベンダープレフィックスが付与されました。 迅速かつ適切なご回答いただき、大変助かりました。改めて、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問