問題描述
Webpack：沒有加載器來處理 SCSS 是輸入存在 (Webpack: no loader to handle the SCSS is input is present)
我已經安裝了 Webpack 5（版本 5.37.0）並且想要將 SASS 文件編譯為獨立的 CSS 文件。我收到以下錯誤：
$ npx webpack 資產 index.js 555 KiB [與 emit 相比]（名稱：main）運行時模塊 1.25 KiB 6 個模塊可緩存模塊 532 KiB ./src/index.js 238 bytes [built] [code generated] ./node_modules/lodash/lodash.js 531 KiB [built] [code generated] ./src/style.scss 78 bytes [built] [code generated] [1 error] ./ 中的錯誤src/style.scss 1:11 模塊解析失敗：意外令牌 (1:11) 您可能需要適當的加載程序來處理此文件類型，目前沒有配置加載程序來處理此文件。見 https://webpack.js.org/concepts#loaders > $body‑color: red; | | 正文 {@./src/index.js 2:0‑22 我知道這意味著不存在處理 SCSS 輸入的加載程序。
當我用谷歌搜索這個錯誤時，我找到了很多答案，但它們不起作用。我認為它們適用於舊版本的 Webpack。
下面是我的整個 webpack.config.js：
const path = require("path") ; const MiniCssExtractPlugin = require('mini‑css‑extract‑plugin') const isDevelopment = process.env.NODE_ENV === 'development' module.exports = { entry: "./src/index.js", mode: "development "，輸出：{ 文件名："index.js"，路徑：path.resolve(__dirname, "dist") }，模塊：{ 規則：[ { test: /\.module\.s(a|c)ss$ /， 利用：[ MiniCssExtractPlugin.loader, "css‑loader", { loader: "sass‑loader", options: { // 首選 `dart‑sass` 實現: require("sass"), }, }, ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: isDevelopment ? '[name].css' : '[name].[hash].css', chunkFilename: isDevelopment ? '[id].css' : '[id]. [哈希].css' }) ], }; 感謝幫助調試這個。
options: { // 首選`dart‑sass` implementation: require("sass"), }, }, ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: isDevelopment ? '[name].css' : '[name].[hash].css', chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css' }) ], };感謝幫助調試這個。
options: { // 首選`dart‑sass` implementation: require("sass"), }, }, ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: isDevelopment ? '[name].css' : '[name].[hash].css', chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css' }) ], };感謝幫助調試這個。
[新的MiniCssExtractPlugin（{文件名：isDevelopment？'[name].css'：'[name].[hash].css'，chunkFilename：isDevelopment？'[id].css'：'[id].[hash]。 css' }) ], };感謝幫助調試這個。
[新的MiniCssExtractPlugin（{文件名：isDevelopment？'[name].css'：'[name].[hash].css'，chunkFilename：isDevelopment？'[id].css'：'[id].[hash]。 css' }) ], };感謝幫助調試這個。
參考解法
方法 1:
I've found the error. Replacing:
test: /\.module\.s(a|c)ss$/,
with
test: /\.s(a|c)ss$/,
fixes it.
I am still pretty new to Webpack, and cutting and pasting from tutorials on the web has its hazards.
(by Free Radical、Free Radical)