將多個SCSS文件導入一個SCSS文件，編譯成一個CSS文件

Question

所以我有以下主 scss 目錄： /assets/scss/main.scss 。

在這個文件中，我有以下項目：

@字符集“utf-8”；

// Initial variables must be imported first
@import "../../node_modules/bulma/sass/utilities/initial-variables.sass";
@import "../../node_modules/bulma/sass/utilities/functions.sass";

當我跳轉到函數文件時，我能夠查看 Bulmas 函數代碼，所以我想導入它。

現在我在以下目錄中有一個 css 文件： /assets/dist/main.css 。

我想將scss/下的所有 .scss 文件導入到main.scss ，然后將main.scss編譯成main.css 。

我嘗試使用以下腳本，但編譯時沒有任何反應：

  "scripts": {
    "css-build": "sass assets/scss/main.scss:assets/dist/main.css --style compressed"
  },

在 main.css 文件中編譯的唯一內容如下：

/*# sourceMappingURL=main.css.map */

有沒有人有一個好的 NPM/Gulp/etc.. 解決方案，關於我如何獲取 .scss 文件目錄並將它們導入 one.scss 文件，然后編譯為 main.css？

Answer 1

這是我使用的配置：

• 安裝

npm i node-sass-glob-importer
npm i --global gulp-cli
    
npm i sass gulp-sass --save-dev
npm i gulp-sass-glob --save-dev
npm i gulp-sourcemaps
npm i gulp-concat
npm i gulp-uglify

• 吞咽文件.js：

const { src, dest } = require('gulp');

const
sourcemaps = require('gulp-sourcemaps'),
sassGlob = require('gulp-sass-glob'),
sass = require('gulp-sass')(require('sass')),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');

function scss() {
return src(['./dev/assets/_scss/main.scss'])
.pipe(sourcemaps.init({largeFile: true}))
.pipe(sassGlob())
.pipe(sass())
.pipe(concat('theme.min.css'))
.pipe(sourcemaps.write('.', {debug: true}))
.pipe(dest('dev/assets/css'));
};
exports.scss = scss;

function js() {
return src('./dev/assets/_scripts/**/*.js') 
.pipe(uglify()) 
.pipe(sourcemaps.init())  
.pipe(concat('theme.min.js')) 
.pipe(sourcemaps.write('.')) 
.pipe(dest('dev/assets/js'));
};
exports.js = js;

main.scss包含像@import 'folder/*'; 或@import 'file.scss';

然后就可以調用gulp scss和gulp js