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';

main.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资产的条目并使用数组条目：

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

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

1 个答案: