Webpack загрузчик файлов с sass-загрузчиком - PullRequest
Новая
       38

Webpack загрузчик файлов с sass-загрузчиком

0 голосов
/ 07 марта 2019

Я новичок в 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

КОДЫ:

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

РЕЗУЛЬТАТ:

Я получаю это сообщение:

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

ВОПРОСЫ

  1. Почему это происходит?

  2. Какие правильные коды для достижения цели ?

1 Ответ

0 голосов
/ 07 марта 2019

Как сказано в сообщении, этот путь недопустим: './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.

...