[英]Webpack concatenate scss files
In my last project I used gulp to concat all .scss files from several folders into one .scss file. 在上一个项目中,我使用gulp将所有文件夹中的所有.scss文件合并为一个.scss文件。 Next I was using sass to compile that singe .scss file into css.
接下来,我使用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/'));
});
Now I want to create exactly the same 'building process' with Webpack. 现在,我想使用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') }
]
}
Unfortunately Webpack don't understand ** and *.scss. 不幸的是,Webpack不理解**和* .scss。 Is there any solution to gain the same behavior?
是否有解决方案来获得相同的行为?
PS I need to concat those files. 附言:我需要合并这些文件。 I don't want to use any kind of Sass @imports etc.
我不想使用任何类型的Sass @imports等。
You need to use loaders for all file types except javascript, to load using webpack. 您需要将加载程序用于除JavaScript以外的所有文件类型,才能使用webpack进行加载。 In your case you need
sass-loader
, css-loader
, style-loader
. 在您的情况下,您需要
sass-loader
, css-loader
和style-loader
。 Perform the below steps to make your scss
work using webpack
: 执行以下步骤,使您的
scss
可以使用webpack
进行工作:
Install below dependencies 在依赖项下安装
npm install sass-loader css-loader style-loader npm安装sass-loader css-loader style-loader
Add the webpack.config.js
添加
webpack.config.js
Webpack config
Webpack配置
module.exports = {
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass?config=otherSassLoaderConfig"]
}
]
},
otherSassLoaderConfig: {
}
};
require('./style.scss')
and it will be loaded require('./style.scss')
,它将被加载 For a detailed refrence you can also take a look at: https://stackoverflow.com/a/26876311/3878940 有关详细的参考资料,您还可以查看: https : //stackoverflow.com/a/26876311/3878940
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.