Question

在我的上一个项目中，我使用gulp将几个文件夹中的所有.scss文件连接成一个.scss文件。接下来我使用sass将singe .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/'));
});

现在我想创建完全相同的“构建过程”＃39;与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。是否有任何解决方案可以获得相同的行为？

PS我需要连接这些文件。我不想使用任何类型的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工作

安装以下依赖项

npm install sass-loader css-loader style-loader
添加webpack.config.js

Webpack配置

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

 }
};

现在只需要将您的scss文件设为require('./style.scss')并将其加载

如需详细参考，您还可以查看：https://stackoverflow.com/a/26876311/3878940

Webpack连接scss文件

2 个答案: