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

Question

我在 extract-text-webpack-plugin 提出了这个问题但是这个插件目前似乎不支持这个功能(我不确定)。

如何将 main.scss 和 home.scss 提取到 main.css 和 home.css在下面的例子中？

结果:没有错误，但只创建了home.css。

home.js

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

主.scss

.test1 { color: #f00; }

home.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 为每个条目创建一个包，所以如果你只有 home 条目并期望 [name].css，你只会得到 home.css。这是你可以做的:

webpack.config.js

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

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

一个更简洁的解决方案是将 scss 和 js Assets 的条目分开并使用数组条目:

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