使用sass-loader和file-loader的Webpack

Question

我是 nodejs 新手，尝试在其中使用 sass 时遇到了问题。

以下信息仅为虚构，但它代表了实际情况。

---

场景：

我有以下文件夹结构：

frontend/
 - scss/
  - style.scss
 - main.js
webpack.config.js

目标:

我希望使用webpack将style.scss编译为style.css，并将其放入dist/frontend/css/目录中，因此应得到以下路径：dist/frontend/css/style.css并创建以下文件夹结构：

dist/
 - frontend/
   - scss/
     - style.scs
   - main.js
frontend/
     - scss/
      - style.scss
     - main.js
webpack.config.js

---

代码：

main.js

import `style from "./scss/style.scss";`

webpack.config.js

 module.exports = {
     mode: "development",
     entry: {
       main: "./frontend/main.js"
     },
     output: {
      path: path.join(__dirname, "/dist/frontend"),
      publicPath: "/",
      filename: "[name].js"
     },
     module: {
       rules: [ 
        {
           test: /\.(s*)css$/,
           use: [
             {
               loader: "file-loader",
               options: {
                 name: "css/[name].[ext]"
               }
             },
             "style-loader/url",
             "css-loader?-url",
             "sass-loader"
           ] 
         }
       ]
   }

---

结果：

我收到了这个消息：

模块未找到：错误：在“E：\ project_name \ frontend”中无法解析“./scss/style.scss”

---

问题：

1. 为什么会出现这种情况？

2. 要实现该目标，正确的代码是什么？

- Ari

Answer 1

正如信息所说，这个路径是无效的：'./scss/style.scss'。在定义路径时有拼写错误。文件夹应该是sass而不是scss。

下面的配置将实现问题中提到的目标：

 module: {
   rules: [
      {
    test: /\.(s*)css$/,        
    use: [
      "style-loader/url",
      {
        loader: "file-loader",
        options: {
          name: "css/[name].css"
        }
      },
      "sass-loader"
    ]
  }
 ]
}

它的工作方式类似于Mini CSS Extract Plugin，但在将多个.scss文件转换为不同的.css文件时，不会为每个.css文件生成额外的.js文件。

- Ari