如何在深度嵌套的目录结构中使用 node-sass?
How do you use node-sass on a deeply nested directory structure?
node-sass 的文档在从命令行使用时公认有点简单。我目前对使用 NPM 脚本作为我的构建工具很感兴趣。
我有一个项目,其中有许多按功能组织的组件。每个功能都是一个单独的文件夹。较大的组件包含较小的组件,其中任意数量的组件都有自己的 .scss
个文件。
我遇到的问题是文档不清楚如何使用 node-sass 轻松地将所有这些文件编译成一个文件。
有一种方法可以从一个目录编译 .scss
文件并将其放入另一个目录,但这会将它们保留为单独的文件。还有另一个建议使用 cat cat <input> | node-sass > <output>
但 cat
不是递归的,也不使用 globs 所以你得到的最多是一个级别的 css.
有没有办法使用 node-sass 使其可以递归地查看给定目录的所有文件并将它们编译成单个 css 样式表?
到目前为止我发现的最好方法有点迟钝。
你使用 find
递归地找到所有正确的文件,然后输出到 cat
将所有这些放在一起,最后到 node-sass
并输出到最终文件.
find src/apps/section -name '*.scss' -print0 | xargs -0 cat | node-sass > ./dist/css/section.css
理想情况下,node-sass 应该接受一个 glob 并对其结果进行操作,但它要么还不够成熟,要么团队没有专注于创建此功能。 IMO,任何类型的编译器,无论是用于 html 模板、JS 转译或缩小还是任何应该能够接受 glob 并输出单个文件的东西。看起来不像是边缘情况...但我知道什么。
Node-sass 确实有一个递归选项,但目前的文档说那只是为了观看。有一个关于此选项的 discussion,但有说明为什么多文件编译不是目标功能(sourcemaps 等)的原因。 :/
我个人希望有更多工具具有更好或更高级的文件处理能力,并让我将所有观看委托给单个脚本,如 npm-script-watcher
。它监视并触发脚本,仅此而已。一个文件更改可以触发一个 运行 lint、构建和测试。它似乎比 linter 的观察者标志、构建器的观察者标志和测试者的观察者更好,然后为每个复制脚本,以防我只想 运行 lint,构建或测试一次而不启动它观看功能。
node-sass 的文档在从命令行使用时公认有点简单。我目前对使用 NPM 脚本作为我的构建工具很感兴趣。
我有一个项目,其中有许多按功能组织的组件。每个功能都是一个单独的文件夹。较大的组件包含较小的组件,其中任意数量的组件都有自己的 .scss
个文件。
我遇到的问题是文档不清楚如何使用 node-sass 轻松地将所有这些文件编译成一个文件。
有一种方法可以从一个目录编译 .scss
文件并将其放入另一个目录,但这会将它们保留为单独的文件。还有另一个建议使用 cat cat <input> | node-sass > <output>
但 cat
不是递归的,也不使用 globs 所以你得到的最多是一个级别的 css.
有没有办法使用 node-sass 使其可以递归地查看给定目录的所有文件并将它们编译成单个 css 样式表?
到目前为止我发现的最好方法有点迟钝。
你使用 find
递归地找到所有正确的文件,然后输出到 cat
将所有这些放在一起,最后到 node-sass
并输出到最终文件.
find src/apps/section -name '*.scss' -print0 | xargs -0 cat | node-sass > ./dist/css/section.css
理想情况下,node-sass 应该接受一个 glob 并对其结果进行操作,但它要么还不够成熟,要么团队没有专注于创建此功能。 IMO,任何类型的编译器,无论是用于 html 模板、JS 转译或缩小还是任何应该能够接受 glob 并输出单个文件的东西。看起来不像是边缘情况...但我知道什么。
Node-sass 确实有一个递归选项,但目前的文档说那只是为了观看。有一个关于此选项的 discussion,但有说明为什么多文件编译不是目标功能(sourcemaps 等)的原因。 :/
我个人希望有更多工具具有更好或更高级的文件处理能力,并让我将所有观看委托给单个脚本,如 npm-script-watcher
。它监视并触发脚本,仅此而已。一个文件更改可以触发一个 运行 lint、构建和测试。它似乎比 linter 的观察者标志、构建器的观察者标志和测试者的观察者更好,然后为每个复制脚本,以防我只想 运行 lint,构建或测试一次而不启动它观看功能。