Question

我有一个React应用程序，试图在其中添加一些Sass。
我也在使用Webpack将我所有的.scss文件捆绑到一个.css文件中进行生产。
为此，我使用了mini-css-extract-plugin，但是我的风格都是即使文件已导入以下我的app.js中，也不会捆绑到最终输出文件中。仅将我app.js中的.scss文件正确装入了捆绑包，但没有正确装入我的styles.scss。因此，我的样式在开发阶段有效，但在部署生产时却没有。

这是我要构建我的应用程序时运行的命令（在package.json文件中）。

"build": "webpack --mode production --config webpack.prod.js ./src/app.js --output ./dist/bundle.js"

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  }
});

webpack.common.js

const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      favicon: './public/images/favicon.ico'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

src / app.js

import 'normalize.css/normalize.css';
import 'react-dates/lib/css/_datepicker.css';
import './styles/styles.scss';

src / styles / styles.scss

@import './base/settings';
@import './base/base';
@import './components/_button';
@import './components/_header';
@import './components/_content-container';
@import './components/_page-header';
@import './components/_input-group';
@import './components/_inputs';
@import './components/_form';
@import './components/_list';

Webpack输出

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 217 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!node_modules/normalize.css/normalize.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!node_modules/react-dates/lib/css/_datepicker.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!src/styles/styles.scss:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss 3.66 KiB {0} [built]
        + 1 hidden module

Webpack mini-css-extract-plugin在捆绑过程中不包括我的scss

0 个答案: