javascript - 无法从单个 .js 条目（导入的多个 .scss 文件）中提取多个 .css 文件？

Question

我在extract-text-webpack-plugin提出了这个问题，但目前看来这个插件不支持这个功能（我不确定）。

如何在下面的示例中提取main.scss和home.scss进入main.css和？home.css

结果：没有错误，只是home.css创建了。

主页.js

import '../scss/main.scss';
import '../scss/home.scss';

主文件

.test1 { color: #f00; }

主页.scss

.test2 { color: #00f; }

webpack.config.js

let webpack = require('webpack');
let ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }, {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
    }]
  },
  entry: {
    'home': './scripts/home.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/static/scripts',
    publicPath: '/static/'
  },
  plugins: [
    new ExtractTextPlugin('../css/[name].css')
  ]
};

Answer 1

Webpack 为每个条目创建一个包，所以如果你只有homeentry 和 expect [name].css，你只会得到home.css. 您可以这样做：

webpack.config.js

entry: {
  'home': './scripts/home.js',
  'main': './scripts/main.js'
}

home.js并在和中导入相关的 scss 文件main.js。

更简洁的解决方案是分离 scss 和 js 资产的条目并使用数组条目：

entry: {
  'home': ['./scripts/home.js', './scss/home.scss'],
  'main': ['./scripts/main.js', './scss/main.scss']
}