Question

我试图将gulp 3x文件移动到4x，并陷入困境，为什么在从@import文件中进行.scss时，gulp无法获取文件的内容。而是输出@import....

这是我的css方法：

function css() {
return gulp
    .src('./src/scss/**/*.scss')
    .pipe(sourcemaps ? sourcemaps.init({loadMaps: true}) : noop())
    .pipe(plumber())
    .pipe(sass({
        includePaths: ['./src/scss/', 'node_modules'],
        outputStyle: 'expanded'
    }))
    .pipe(gulp.dest('./public/css/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(postcss([autoprefixer(), cssnano({
        discardComments: {
            removeAll: true
        },
        discardDuplicates: true,
        discardEmpty: true,
        minifyFontValues: true,
        minifySelectors: true
    })]))
    .pipe(sourcemaps ? sourcemaps.write('./') : noop())
    .pipe(size({gzip: true, showFiles: true}))
    .pipe(gulp.dest('./public/css/'))
    .pipe(browsersync.stream());

}

这是我的.scss文件：

@import url('https://fonts.googleapis.com/css?family=Nunito:300,400|Roboto:400,500');
@import "~pickadate/lib/compressed/themes/default.css";
@import "~pickadate/lib/compressed/themes/default.date.css";
@import "variables";
@import "calendar";

body {
  font-family: 'Nunito', sans-serif;
}
...

这是gulp的输出内容：

@import url("https://fonts.googleapis.com/css?family=Nunito:300,400|Roboto:400,500");
@import url(~pickadate/lib/compressed/themes/default.css);
@import url(~pickadate/lib/compressed/themes/default.date.css);
.calendar {
    color: red;
}
body {
  font-family: 'Nunito', sans-serif;
}

在我的gulp 3x文件中，它将所有.scss（以及任何导入的文件）编译成单个.css文件。相反，我正在获取导入的字符串。

我对自己做错了感到困惑。谢谢您的任何建议！

Answer 1

这是我为遇到此问题的任何人想到的。我最终手动将所需的css文件复制到regex目录中。

从那里，我更新了Route::get('/product/{id}/', 'ProductController@show') ->name('product.id') ->where(['id' => '[0-9]+']);文件，如下所示：

build

希望这会有所帮助。我仍然想弄清楚如何避免手动复制gulpfile.js文件，但这是一个好的开始。

gulp为什么不从node_modules中拉出CSS？

1 个答案: