Laravel 5:灵药。如何从 node_modules 目录引用 css 文件
Laravel 5: Elixir. How to reference a css file from node_modules directory
我正在使用通过 npm 导入的 css 文件。分别保存在我的“/node_modules”目录下
我想用 elixir 将这个文件与我的其他 css 文件一起编译,并且正在寻找一种方法,如何正确地包含它。
我可以做的选择是:
- 将文件从 file.css 重命名为 file.scss 并将其导入我的 app.scss
将 file.css 文件复制到我的 "resources/assets/" 目录,将其重命名为 scss 并将其包含在我的 sass 编译中,如下所示:
现在我想知道,是否有一种方法可以从 "node_modules" 目录中引用该文件,而无需触及该文件,因为我希望其他人下载该项目并使用 "composer install" "npm install" 起床 运行.
或者最常见的处理方式是将每个需要的文件从我的 "node_modules" 目录复制到我的 resources/assets 文件夹?看起来很奇怪,因为 laravel 框架包含的 bootstrap 文件是通过 app.scss 文件中的 scss 导入添加的。
现在我想要同样的东西,但是 scss 文件无法导入 css 文件,在我的情况下,这需要我重命名它,这不会在任何其他环境中开箱即用,因为 "node_modules" 目录不包含在版本控制中。
关于在我的 "node_modules" 目录中编译 css 个文件的最佳方法有什么建议吗?
如果您查看 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目录复制scss文件然后编译sass.
只需在文件路径前加一个点即可。
mix.scripts([
'./node_modules/autosize/src/autosize.js',
'./bower_components/jquery-tokenize/jquery.tokenize.js'
], 'public/js/app.js');
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')
];
});
我正在使用通过 npm 导入的 css 文件。分别保存在我的“/node_modules”目录下
我想用 elixir 将这个文件与我的其他 css 文件一起编译,并且正在寻找一种方法,如何正确地包含它。
我可以做的选择是:
- 将文件从 file.css 重命名为 file.scss 并将其导入我的 app.scss
将 file.css 文件复制到我的 "resources/assets/" 目录,将其重命名为 scss 并将其包含在我的 sass 编译中,如下所示:
现在我想知道,是否有一种方法可以从 "node_modules" 目录中引用该文件,而无需触及该文件,因为我希望其他人下载该项目并使用 "composer install" "npm install" 起床 运行.
或者最常见的处理方式是将每个需要的文件从我的 "node_modules" 目录复制到我的 resources/assets 文件夹?看起来很奇怪,因为 laravel 框架包含的 bootstrap 文件是通过 app.scss 文件中的 scss 导入添加的。
现在我想要同样的东西,但是 scss 文件无法导入 css 文件,在我的情况下,这需要我重命名它,这不会在任何其他环境中开箱即用,因为 "node_modules" 目录不包含在版本控制中。
关于在我的 "node_modules" 目录中编译 css 个文件的最佳方法有什么建议吗?
如果您查看 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目录复制scss文件然后编译sass.
只需在文件路径前加一个点即可。
mix.scripts([
'./node_modules/autosize/src/autosize.js',
'./bower_components/jquery-tokenize/jquery.tokenize.js'
], 'public/js/app.js');
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')
];
});