Question

我在styles文件夹中有一个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被发现here。

Webpack Production中未构建Sass文件

0 个答案: