SASS / Gulp：使用来自另一个文件的 mixins 和 vars

Question

我有以下文件夹结构设置：

theme
   - assets
      - sass
         - _theme-styles.scss
      - _styles.scss
   - modules
      - hero
         - hero.html
         - hero.scss
         - hero.css (gulp will compile this file)

_theme-styles.scss 目前真的很简单，看起来像这样：

// VARS
$white: #FFFFFF;

_styles.scss 看起来像这样：

@import "../../../node_modules/bootstrap/scss/bootstrap.scss";
@import "../../../node_modules/bootstrap/scss/variables.scss";
@import "../../../node_modules/bootstrap/scss/mixins.scss";

$grid-breakpoints: (
  xs: 0px,
  sm: 576px,
  md: 786px,
  lg: 992px,
  xl: 1200px,
);

// Import Globals
@import "config/**.scss";

作为参考，我的gulpfile.js 看起来像这样：

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
var paths = {
    styles: {
        src: 'modules/**/*.scss',
        dest: 'modules'
    }
}
function scss() {
    return gulp.src(paths.styles.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(paths.styles.dest));
}
exports.scss = scss
function watch() {

    scss()

    gulp.watch(paths.styles.src, scss);
}
exports.watch = watch

我要做什么

我想引用其他文件中定义的variables 和mixins。例如，按照我当前的工作流程设置，在 hero.scss 我有：

.hero { background: $white; }

我已经在 _theme-styles.scss 中定义了这个变量，并且希望能够在这里使用它而无需重新定义。

同样，当使用 mixins 时，例如下面的例子：

.hero{
    @include media-breakpointup(md){
        padding: 60px;
    }
}

上面的mixin是在bootstrap节点模块文件夹中定义的。但是当引用这些时，我在运行gulp watch 时得到undefined errors。

Answer 1

您应该在hero.scss 的顶部

@use 'pathsToYourOtherSCSSFiles';

喜欢：

@use '../assets/sass/theme-styles';
@use '../assets/styles';
and same to the bootstrap file with the mixin defined

我没有测试这些路径，但它们应该是从您的 hero.scss 文件到您想要的 @use 文件的相对路径。见https://sass-lang.com/guideModules