繁体   English   中英

Laravel混合:一行编译所有scss文件

Laravel mix: Compiling all scss files in one line

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我一直在研究 laravel 项目,我的资源文件夹中有许多.scss 文件。 所以通常我会这样写

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/header.js', 'public/js')
    .sass('resources/sass/file1.scss', 'public/css')
    .sass('resources/sass/file2.scss', 'public/css')
    .sass('resources/sass/file3.scss', 'public/css')
    .sass('resources/sass/file4.scss', 'public/css')
    .sass('resources/sass/file5.scss', 'public/css')
    .sass('resources/sass/file6.scss', 'public/css')
    .sass('resources/sass/file7.scss', 'public/css')
    .sass('resources/sass/file8.scss', 'public/css')
    .sass('resources/sass/file9.scss', 'public/css')
    .sass('resources/sass/file10.scss', 'public/css')
    .sourceMaps();

有什么方法可以缩短它,而不是 coding.sass(source,destination),而是像源数组一样写入,然后写入目标? 无需将所有文件合并到一个 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 中,因为当然,每个 sass 文件都有自己的页面。 like.sass([array_source], 目的地)?

1 个回复

2种方式:

第一种方式:

制作一个名为app.scss的文件,并在此@import "file.scss"中包含所有文件。

然后.sass('resources/sass/app.scss', 'public/css')这将使所有文件成为一个文件。 这可能不是你所追求的。

第二种方式:

const fs = require("fs");

fs.readdirSync("resources/scss/").forEach(fileName => 
    mix.scss(`resources/scss/${fileName}`, "public/css"));

这会将它们全部保存在单个文件中。

1 Laravel混合跳过一条scss行

我正在Laravel 5.4中开发Laravel项目。 我将Laravel混合包用于CSS,混合CSS文件。 今天,我将这些行添加到我的个人scss文件中 但混合结果后我得到的只是 我不明白为什么-webkit-box-orient行是垂直的; 丢失,或者可能被跳过。 自从我从html的s ...

2 Laravel Mix 突然停止编译 SCSS 并写入空文件

就在几天前,我的 mix 中的所有内容都正确编译,无论是 js 到 js 还是 scss 到 css。 与此同时,我没有更改 scss 文件中的任何内容,也没有更改任何混合或整体设置。 但是,我在 Laravel 项目的 resources/js 文件夹中移动了一些项目的 jsb 文件,并相应地调整 ...

3 Laravel Mix Watch 编译/发送所有文件

我已经进行了一些挖掘,但似乎找不到解决问题的方法。 我基本上希望 webpack/mix 只编译已编辑的文件,而不是我认为它正在做的事情并编译​​所有内容。 对于每个使用 Vue 的 laravel 视图,我都有一个 JavaScript 文件,因此每个页面都有一个 Vue 独立应用程序。 这意味着 ...

5 Laravel 混合导入多个 globbed SCSS 文件到 app.scss

我有一个项目结构,其中每个组件都有自己的 SCSS 文件,我希望将所有这些自动导入到项目的主app.scss文件中,而不必单独列出它们或在每次新组件时更新列表被添加。 我知道合并一堆全局 CSS 文件可能会导致选择器顺序出现问题,但这不是问题。 我已经尝试过,将components.scss文件导 ...

7 如何停止在laravel-mix中编译不相关的SCSS

我正在使用Laravel,我已经配置了'webpack.mix.js',如下所示。 所有主.scss文件都在其中导入了一些常见的子.scss文件。 我认为如果我编辑公共文件就可以了,因此在使用'npm run watch'时会编译所有文件但是如果我正在编辑只导入一个或两个文件的文件,并且所有 ...

9 使用 Laravel MIX 将多个 CSS 编译为一个 CSS

我当前的 webpack.mix.js 配置是: 如果我有另一个 CSS,比方说“plugin-1.css”,我怎样才能将两者合并以便获得一个 app.css 的输出? 我试过 ['resources/css/app.css', 'plugin-1.css'] 但这不是一个选项。 ...

10 使用罗盘命令行编译单个.scss文件

是否可以通过罗盘命令行实用程序来单独编译文件? 我要问的原因是我目前有一个艰苦的任务,为目录运行指南针编译命令,但是,当项目变大时,这可能会成为问题;当一个文件更改时,它会尝试编译许多文件,因此我正在尝试查看是否有一种方法可以像指南针一样编译app / css / style.scss:a ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM