Javascript 从js文件绑定多个css导入的网页包

这是我的

app.js

文件中导入列表的一部分：

import "jsgrid"
import "./../node_modules/jsgrid/dist/jsgrid.css";
import "./../node_modules/jsgrid/dist/jsgrid-theme.css";
import "jstree";
import "./../node_modules/jstree/dist/themes/default/style.css";

这是我的

webpack.config

：

var path = require('path');
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//var SplitChunksPlugin = require('webpack.optimization.splitChunks');
var LiveReloadPlugin = require('webpack-livereload-plugin');

const autoprefixer = require('autoprefixer');

module.exports = {
  entry:{
    app: [ './src/app.scss', 'jquery', './src/app.js']
  },
  devtool: 'inline-source-map',
  externals: /^(tables.)/i,
  module: {
    rules: 
    [
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000'
      },
      {
        test: /\.(css)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle-css.css',
            },
          },
          {loader: 'extract-loader'},
          {loader: 'css-loader'},
          {loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()],
            },
          },
          ],
      },
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle-sass.css',
            },
          },
          {loader: 'extract-loader'},
          {loader: 'css-loader'},
          {loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()],
            },
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['./node_modules'],
            },
          }],
      },
      {
        test: /\.js$/,
        include: /src/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
        },
      }],
  },
  /*optimization: {
    splitChunks: {
      chunks: "initial"
    }
  },*/
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  plugins: [
    new ExtractTextPlugin('style.css'),
    new LiveReloadPlugin({}),
    new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery' })
    /*new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/vendor-manifest.json')
      })*/
  ],
  resolve: {
    extensions: ['.js']
  },

  watch: true,
  watchOptions: {
    aggregateTimeout: 300,

    //ignored: /node_modules/
  },
  output: {
    publicPath: './dist',
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
};

现在的问题是webpack似乎只考虑了导入列表中的第一个.css文件，而忽略了其余的。 所以到目前为止，webpack只会将

jsgrid.css

编译到我的

bundle css.css

中。但如果我评论这行：

import././node\u modules/jsgrid/dist/jsgrid.css”

然后webpack将只编译

jsgrid.theme

到my bundle.css中。

---

我已经寻找这个问题很久了，但没有找到任何东西

您的配置完全错误，请参阅我所做的更改：

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');   // <-------- run npm install --save-dev mini-css-extract-plugin
const LiveReloadPlugin = require('webpack-livereload-plugin');

const autoprefixer = require('autoprefixer');

module.exports = {
  entry:{
    app: './src/app.js'
  },
  devtool: 'inline-source-map',
  externals: /^(tables.)/i,
  module: {
    rules: 
    [
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000'
      },
      {
        test: /\.(css)$/,
        use: [
          MiniCssExtractPlugin.loader, // <---- added here
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()],
            }
          }
         ],
      },
      {
        test: /\.(scss)$/,
        use: [
          MiniCssExtractPlugin.loader, // <--- added here
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
                plugins: () => [autoprefixer()],
            },
          },
          'sass-loader'
        ],
      },
      {
        test: /\.js$/,
        include: /src/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
        },
      }],
  },
  /*optimization: {
    splitChunks: {
      chunks: "initial"
    }
  },*/
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename: 'style.css'
    }),
    new LiveReloadPlugin({}),
    new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery' })
    /*new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/vendor-manifest.json')
      })*/
  ],
  resolve: {
    extensions: ['.js']
  },

  watch: true,
  watchOptions: {
    aggregateTimeout: 300,

    //ignored: /node_modules/
  },
  output: {
    publicPath: './dist',
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
};

const path=require（'path'）；
const webpack=require（'webpack'）；
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）；//谢谢你的快速回答。不幸的是，昨天我没有时间测试它。但现在我做到了。这几乎是完美的。我只需将我的app.scss添加为入口点，然后将node_modules路径包含到postsss加载器，因为我正在从我的app.scss中的插件导入一些scss。你的app.scss应该导入到你的app.js中。把它们作为切入点不是一个好的做法。