Question

我正在使用通过npm导入的css文件。它分别保存在我的＆＃34; / node_modules＆＃34; 。目录

我想用elixir的其他scss文件编译这个文件，并且正在寻找一种方法，如何正确地包含它。

我可以做的选择是：

将文件从file.css重命名为file.scss并将其导入我的app.scss
将file.css文件复制到我的＆＃34; resources / assets /＆＃34;目录，将其重命名为scss并将其包含在我的sass编译中，如下所示：

现在我想知道，如果有一种方法可以从＆＃34; node_modules＆＃34;中引用该文件。目录，没有触及文件，因为我希望其他人下载项目并使用＆＃34; composer install＆＃34;和＆＃34; npm install＆＃34;启动并运行。

或者是处理此问题的最常用方法，只是从我的＆＃34; node_modules＆＃34;中复制所有必需的文件。目录到我的资源/资产文件夹？看起来很奇怪，因为laravel框架的包含的bootstrap文件只是通过app.scss文件中的scss导入添加。

现在我想要相同，但是scss文件无法导入css文件，我的情况就是这样，这需要我重命名它，这在任何其他环境中都无法开箱即用，因为＆＃34; node_modules＆＃34;目录不包含在版本控制中。

任何建议，关于在我的＆＃34; node_modules＆＃34;中编译css文件的最佳方法是什么？？目录

Answer 1

如果你看Elixir documentation，你会注意到你可以使用许多方便的功能。其中一个是mix.copy()函数（您可以复制单个文件或整个目录，例如整个jquery文件夹）。

elixir(function(mix) {
    mix.copy('node_modules/blabla/file.scss', 'resources/assets/sass/file.scss');
    mix.sass(['file.scss', 'app.scss']);
});

这种方式每次调用gulp时，它都会首先从node_modules dir复制scss文件，然后编译sass。

Answer 2

只需在文件路径前添加一个点。

mix.scripts([
    './node_modules/autosize/src/autosize.js',
    './bower_components/jquery-tokenize/jquery.tokenize.js'
], 'public/js/app.js');

Answer 3

var elixir = require('laravel-elixir');
var path = require('path');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Less
 | file for our application, as well as publishing vendor resources.
 |
 */

function node_modules(filename) {
    return path.join('../../../node_modules/', filename);
}

elixir(function (mix) {

    var base = [
        node_modules('bootstrap-sass/assets/javascripts/bootstrap/tooltip.js'),
        node_modules('bootstrap-sass/assets/javascripts/bootstrap/collapse.js')
    ];
});

Laravel 5：Elixir。如何从node_modules目录引用css文件

3 个答案: