3

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

如何在下面的示例中提取main.scsshome.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')
  ]
};
4

1 回答 1

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']
}
于 2017-02-27T08:03:09.223 回答