使用 webpack 导入目录中的所有 sass 文件 [英] Import all sass file within directory with webpack

问题描述

我目前正在尝试使用 Webpack 来捆绑我的所有文件，但在处理多个文件夹和 .scss 文件时我不知道如何继续.

I'm currently trying to use Webpack to bundle all my files and I don't know how to proceed when dealing with multiple folders and .scss files.

我曾经使用 grunt 来完成这些任务，这是我的文件夹结构示例:

I used to use grunt to do these tasks, and this is an example of my folder structure:

functions
    - _mixin.scss
    - _function.scss
    - [...]
variables
    - _colors.scss
    - _typo.scss
    - [...]
ui
    - _button.scss
    - _grid.scss
    - [...]
view
    - _home.scss
    - _about.scss
    - [...]

使用 Grunt 我将运行一个任务来生成一个名为 main.scss 的文件，其中包含所有 @import，例如:

With Grunt I would run a task to generate a file called main.scss containing all the @import, for example:

@import 'function/_mixin.scss';
@import 'function/_function.scss';
@import 'variables/_colors.scss';
@import 'variables/_typo.scss';
[...]

目前我正在我的 .js 文件中指定一个导入(与 extract-text-webpack-plugin 结合使用)来定义 main.scss 文件，但每个新的 import 或旧的都需要手动添加/删除.有没有办法使用 WebPack 自动执行此任务?

Currently I'm specifying an import inside my .js file (used in conjunction with extract-text-webpack-plugin) to define the main.scss file, but each new import, or old one, needs to be added/removed manually. Is there a way to automate this task with WebPack?

推荐答案

注意 - 仅适用于 webpack 2(需要更新 webpack 3^)

Note - only works with webpack 2 (requires update for webpack 3^)

你可以使用插件 import-glob-loader github/npm

它支持使用

@import "foo/**/*";

输出到

@import "foo/1.scss";
@import "foo/bar/2.scss";
@import "foo/bar/3.scss";

这篇关于使用 webpack 导入目录中的所有 sass 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！