代码之家 › 专栏 › 技术社区 › Ari

带有sass加载器的webpack文件加载器

webpack-file-loader sass-loader sass webpack node.js

0

Ari · 技术社区 · 5 年前

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

以下信息只是虚构的,但它表示实际情况。

场景:

我有以下文件夹结构:

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

目标 :

我想编译 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

代码:

MIN 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"
           ] 
         }
       ]
   }

结果:

我收到这个消息:

Module not found: Error: Can't resolve './scss/style.scss' in 'E:\project_name\frontend'

问题

为什么会这样?
正确的代码是什么? 目标 ?

0 回复 | 直到 5 年前

1

0

Ari 5 年前

如消息所述,此路径无效: './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 ,但不会生成额外的 .js 每个文件 .css 用于转换多个 .scss 文件分为不同的 CSS 文件夹。