Файлы Sass не собираются в Webpack Production - PullRequest
0 голосов
/ 13 ноября 2018

У меня есть файл global.scss в папке стилей, и он отлично работает, когда я в режиме разработки. Но когда я создаю свой сценарий, все мои .scss файлы не компилируются.

вот мое webpack.conf.js правило

const isDevMode = options.mode === 'development'


{
   test: /\.(sa|sc|c)ss$/,
   use: [
     {
       loader: isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader
      },
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          importLoaders: 1
        }
      },
      { loader: 'sass-loader' }
   ]
},

плагин часть конфигурации webpac:

plugins: [
  new MiniCssExtractPlugin({
     filename: '[name].css',
     chunkFilename: '[id].[hash].css'
  })
]

вот файл ввода index.js

import 'sanitize.css'
import './styles/styles.scss'

import React from 'react'
import { hot } from 'react-hot-loader'
import ReactDOM from 'react-dom'

// font-awesome
import { library } from '@fortawesome/fontawesome-svg-core'
import icons from 'Helpers/fontawesome'
...

Вот дамп при сборке скрипта

Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/lib/loader.js!app/components/Form/styles.scss:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/lib/loader.js!app/components/NavMenu/react-metismenu-standart.scss:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/lib/loader.js!app/components/NavMenu/styles.scss:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/lib/loader.js!app/components/SearchMenu/styles.scss:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/lib/loader.js!app/styles/styles.scss:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader??ref--5-1!./node_modules/sass-loader/lib/loader.js!./app/styles/styles.scss 135 KiB {0} [built]
        + 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/lib/loader.js!node_modules/react-calendar/dist/Calendar.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/lib/loader.js!node_modules/react-circular-progressbar/dist/styles.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/lib/loader.js!node_modules/react-vis/dist/style.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/sass-loader/lib/loader.js!node_modules/sanitize.css/sanitize.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules

Вот файлы, сделанные

├── 2.6f98ef8b0e1171fa8251.css
├── 3.6f98ef8b0e1171fa8251.css
├── 8.6f98ef8b0e1171fa8251.css
├── ...
├── index.html
├── main.bundle.js
└── main.css

main.css имеет только импортированные sanitize.css из файла ввода.

Мой global.scss можно найти здесь .

...