Webpack连接scss文件

Question

在上一个项目中，我使用gulp将所有文件夹中的所有.scss文件合并为一个.scss文件。 接下来，我使用sass将.scss文件编译为css。

gulp.task('styles', function () {
  gulp.src('styles/**/*.scss')
    .pipe(concat('style.scss'))
    .pipe(gulp.dest('production/'))

    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('production/'))

    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(rename('style-min.css'))
    .pipe(gulp.dest('production/'));
});

现在，我想使用Webpack创建完全相同的“构建过程”。

entry: {
    "style": "./styles/**/*.scss",
    "style.min": "./styles/**/*.scss"
},
output: {
    path: __dirname,
    filename: "[name].css"
},
plugins: [
    new ExtractTextPlugin('[name].css')
],
module: {
    loaders: [
        //Sass file
        { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') }
    ]
}

不幸的是，Webpack不理解**和* .scss。 是否有解决方案来获得相同的行为？

附言：我需要合并这些文件。 我不想使用任何类型的Sass @imports等。

Answer 1

例如，您可以使用如下所示的node-glob软件包：

var glob = require('glob');
var styles = glob.sync('./styles/**/*.scss');

module.exports = {
  entry: {
    'style': styles,
  ...

Answer 2

您需要将加载程序用于除JavaScript以外的所有文件类型，才能使用webpack进行加载。 在您的情况下，您需要sass-loader ， css-loader和style-loader 。 执行以下步骤，使您的scss可以使用webpack进行工作：

1. 在依赖项下安装

   npm安装sass-loader css-loader style-loader

2. 添加webpack.config.js

Webpack配置

module.exports = {
  module: {
    loaders: [
     {
       test: /\.scss$/,
       loaders: ["style", "css", "sass?config=otherSassLoaderConfig"]
     }
   ]
 },
 otherSassLoaderConfig: {

 }
};

3. 现在只需要您的scss文件作为require('./style.scss') ，它将被加载

有关详细的参考资料，您还可以查看： https : //stackoverflow.com/a/26876311/3878940