3

我正在使用通过 npm 导入的 css 文件。它分别保存在我的“/node_modules”目录中。

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

我可以做的选择是：

  1. 将文件从 file.css 重命名为 file.scss 并将其导入我的 app.scss

  2. 将 file.css 文件复制到我的“resources/assets/”目录，将其重命名为 scss 并将其包含在我的 sass 编译中，如下所示：

现在我想知道，是否有办法从“node_modules”目录中引用文件，而无需触及文件，因为我希望其他下载项目并使用“composer install”和“npm install”的人启动和运行。

或者是最常见的处理方式，只是将每个需要的文件从我的“node_modules”目录复制到我的资源/资产文件夹？看起来很奇怪，因为 laravel 框架的包含引导文件是通过 app.scss 文件中的 scss 导入添加的。

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

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

4

3 回答 3

3

如果您查看Elixir 文档，您会注意到您可以使用许多方便的函数。其中之一是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 目录复制 scss 文件，然后编译 sass。

于 2015-07-21T20:06:01.207 回答
1

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

mix.scripts([
    './node_modules/autosize/src/autosize.js',
    './bower_components/jquery-tokenize/jquery.tokenize.js'
], 'public/js/app.js');
于 2016-05-19T19:07:29.670 回答
0 
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')
    ];
});
于 2017-01-02T16:53:41.133 回答