前提・実現したいこと
webpack初心者です。
postcss-loader autoprefixerをpackage.jsonインストールしましたがターミナルでエラーが発生して原因が分かりません。
詳しい方教えてください。
どうぞよろしくお願いいたします。
発生している問題・エラーメッセージ
ターミナルのエラーコードになります。 ERROR in ./src/stylesheets/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ref--4-3!./src/stylesheets/main.scss) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader (C:\Users\81907\Dev\Udemy\webpack\node_modules\postcss-loader\dist\index.js:38:24) i 「wdm」: Failed to compile.
該当のソースコード
package.jsonのプラグインになります。 { "name": "webpack-practice", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Ota Yuichi", "license": "UNLICENSED", "private": true, "devDependencies": { "autoprefixer": "^10.2.5", "clean-webpack-plugin": "^3.0.0", "css-loader": "^3.4.2", "file-loader": "^5.1.0", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "mini-css-extract-plugin": "^0.9.0", "node-sass": "^4.13.1", "postcss": "^8.2.9", "postcss-loader": "^5.2.0", "pug-html-loader": "^1.1.5", "sass-loader": "^8.0.2", "style-loader": "^1.1.3", "url-loader": "^3.0.0", "webpack": "^4.41.6", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.10.3" }, "browserslist": [ "last 2 version", "ie >= 11" ] }
webpack.config.jsのコードになります。 const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/javascripts/main.js', output: { path: path.resolve(__dirname, './dist'), filename: 'javascripts/main.js', }, module: { rules: [ { test: /.(css|sass|scss)/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', }, { loader: 'sass-loader', }, { loader: "postcss-loader", options: { postcssOptions: { plugins: [ require('autoprefixer')({ grid: true }) ], }, }, }, ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: './stylesheets/main.css', }), new CleanWebpackPlugin(), ], }
あなたの回答
tips
プレビュー