У меня есть файл 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
можно найти здесь .