css - 具有多个入口点的 node-sass 脚本

标签 css npm sass scss-lint npm-scripts

我有一个元素,其结构.scss 作为主要入口点,然后每个平台都有第二个入口点。文件夹结构:

scss/
|
|-- components/                 # Modular Component Files
|   |-- login.scss              # Structure file for Login Module
|
|-- platforms/
|   |-- globals/
|       |-- components/
|           |-- login.scss
|       |-- global-imports.scss
|       |-- base.scss
|   |-- platform1.scss          # Entrypoint for Platform 1
|   |-- platform2.scss          # Entrypoint for Platform 2
|   |-- platform3.scss          # Entrypoint for Platform 3
|
`-- structure.scss              # Primary Entrypoint for all Platforms

我的 Npm 脚本:

"scripts": {
    "platform": "node-sass --watch --recursive --output-style 'compressed' src/scss/platforms/ -o public_html/inc/assets/css/platforms",
    "structure": "node-sass --watch --recursive --output-style 'compressed' src/scss/style.scss public_html/inc/assets/css/style.css",
    "scss": "npm run platform & npm run structure"
},

我希望他监视所有文件并在任何文件发生更改后编译新文件。他目前正在用这个脚本创建正确的文件...但问题是,他尝试将该文件编译为我进行更改的入口点文件,这给我带来了很多控制台错误,因为他没有找到任何变量或类似的变量。最后,我每次都需要对正确的文件进行无用的更改,以获得正确的工作文件...

有人可以帮我解决这个问题吗?

另一个问题是,我无法覆盖任何 platform.scss 中的 platform > globals > Components > login.scss 中的默认 mixin 变量...

最佳答案

好的,我找到了解决方案!只需使用以下命令查看整个 scss 文件夹:

  "scripts": {
    "scss": "node-sass --watch --recursive --output-style 'compressed' src/scss/ -o public_html/css/"
  },

并在所有不想用作入口点的文件的文件名前添加下划线!就像_file.scss

_files 将被导入,但被观察者忽略。

关于css - 具有多个入口点的 node-sass 脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42512170/

相关文章:

css - 如何正确使用 Media Query 使一列消失,另一列调整到屏幕宽度?

javascript - Twitter Bootstrap(和类似的 CSS 框架)文件夹位置

html - 我无法在页面中水平居中内容

jquery - Ajax 不会让 css 当前链接样式正常工作

css - 如何将文本放置在图像的右侧

node.js - windows 下Satellizer安装错误

html - 在 Node.js 中将 HTML 作为图像渲染到缓冲区中

css - Sass 文件夹输出到 CSS 文件夹

node.js - node_modules/@types/错误(接口(interface) 'Element' 不能同时扩展类型 'ReactElement<any>)

CSS SASS if else if 语句