css - Prepros 应该在 Github.io 页面上将我的 SASS 编译成 CSS 吗？如果是这样，是什么导致我的 SASS 样式在 Github.io 页面上不起作用？

Question

我的元素的样式就像我希望它在本地一样。将其推送到 GitHub 并且所有文件似乎都存在后，我将其发布到 GitHub.io 页面，但我的任何样式都不存在。

我是否从根本上误解了 Prepros 的目的和用途，还是我犯了其他错误？您需要哪些信息才能确定问题所在？

我的 prepros-6.config 文件

 {
  "name": "landingPage",
  "firstRun": false,
  "exportConfig": true,
  "fileConfigs": [
    {
      "path": "styles/style.sass",
      "configJson": "{\"forceCompile\":false,\"customOutput\":\"styles/style.css\",\"autoCompile\":true,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}"
    }
  ],
  "fileTree": {
    "expandedDirs": [],
    "hideSystemFiles": true,
    "systemFiles": [
      ".*",
      "desktop.ini",
      "prepros.config",
      "$RECYCLE.BIN",
      "prepros.cfg",
      "prepros-6.config",
      "Prepros Export"
    ],
    "hideUnwatchedFiles": false
  },
  "imports": [
    {
      "path": "styles/style.sass",
      "imports": [
        "styles/_colors.sass"
      ]
    }
  ],
  "projectView": {
    "selectedView": "file-tree"
  },
  "fileWatcher": {
    "enabled": true,
    "watchedExtensions": [
      "less",
      "sass",
      "scss",
      "styl",
      "md",
      "markdown",
      "coffee",
      "js",
      "jade",
      "haml",
      "slim",
      "ls",
      "kit",
      "png",
      "jpg",
      "jpeg",
      "ts",
      "pug",
      "css",
      "html",
      "htm",
      "php"
    ]
  },
  "pathFilters": [
    "node_modules",
    ".*",
    "bower_components",
    "prepros.config",
    "Prepros Export",
    "prepros-6.config",
    "prepros.cfg",
    "wp-admin",
    "wp-includes"
  ],
  "server": {
    "port": 7887,
    "assignNewPortAutomatically": true,
    "enable": true,
    "proxy": {
      "enable": false,
      "url": ""
    }
  },
  "browser-sync": {
    "enable": false,
    "clicks": true,
    "forms": true,
    "scroll": true
  },
  "live-reload": {
    "enable": true,
    "animate": true,
    "delay": 0
  },
  "ftp-deploy": {
    "connectionType": "ftp",
    "remotePath": "",
    "uploadTimeout": 20000,
    "uploadOnChange": false,
    "ftp": {
      "secure": false,
      "host": "",
      "port": 21,
      "user": "",
      "password": ""
    },
    "sftp": {
      "host": "",
      "port": 22,
      "usePrivateKey": false,
      "username": "",
      "password": "",
      "privateKey": "",
      "passphrase": ""
    },
    "pathFilters": [
      "config.rb",
      "prepros.config",
      "prepros-6.config",
      "node_modules",
      "Prepros Export",
      ".git",
      ".idea",
      ".sass-cache",
      ".hg",
      ".svn",
      ".cache",
      ".DS_Store",
      "*.sass",
      "*.scss",
      "*.less",
      "*.pug",
      "*.jade",
      "*.styl",
      "*.haml",
      "*.slim",
      "*.coffee",
      "*.ls",
      "*.kit",
      "*.ts"
    ],
    "history": []
  },
  "file-type-sass": "{\"compilers\":[\"node-sass\",\"autoprefixer\",\"minify-css\"]}",
  "file-type-less": "{\"compilers\":[\"less\",\"autoprefixer\",\"minify-css\"]}",
  "autoprefixer": {
    "browsers": "last 5 versions"
  },
  "file-type-pug": "{\"compilers\":[\"pug\"]}",
  "file-type-css": "{\"compilers\":[\"autoprefixer\",\"cssnext\",\"minify-css\"]}",
  "file-type-javascript": "{\"compilers\":[\"concat-js\",\"babel\",\"uglify-js\"]}",
  "file-type-stylus": "{\"compilers\":[\"stylus\",\"autoprefixer\",\"minify-css\"]}",
  "file-type-markdown": "{\"compilers\":[\"markdown\"]}",
  "file-type-haml": "{\"compilers\":[\"haml\"]}",
  "file-type-slim": "{\"compilers\":[\"slim\"]}",
  "file-type-coffee-script": "{\"compilers\":[\"coffee-script\",\"uglify-js\"]}",
  "file-type-livescript": "{\"compilers\":[\"livescript\",\"uglify-js\"]}",
  "file-type-kit": "{\"compilers\":[\"kit\"]}",
  "uglify-js": {
    "ie8": false,
    "compress": {
      "sequences": true,
      "properties": true,
      "dead_code": true,
      "drop_debugger": true,
      "unsafe": false,
      "unsafe_comps": false,
      "unsafe_math": false,
      "unsafe_proto": false,
      "unsafe_regexp": false,
      "conditionals": true,
      "comparisons": true,
      "evaluate": true,
      "booleans": true,
      "loops": true,
      "unused": true,
      "toplevel": false,
      "top_retain": "",
      "hoist_funs": true,
      "hoist_vars": false,
      "if_return": true,
      "join_vars": true,
      "cascade": true,
      "collapse_vars": true,
      "reduce_vars": true,
      "warnings": true,
      "negate_iife": true,
      "pure_getters": false,
      "pure_funcs": [],
      "drop_console": false,
      "expression": false,
      "keep_fargs": true,
      "keep_fnames": false,
      "passes": 1,
      "keep_infinity": false,
      "side_effects": true,
      "global_defs": []
    },
    "output": {
      "ascii_only": false,
      "beautify": false,
      "bracketize": false,
      "comments": "",
      "indent_level": 4,
      "indent_start": 0,
      "inline_script": false,
      "keep_quoted_props": false,
      "max_line_len": false,
      "preamble": "",
      "preserve_line": false,
      "quote_keys": false,
      "quote_style": 0,
      "semicolons": true,
      "shebang": true,
      "width": 80
    }
  },
  "cssnext": {
    "customProperties": true,
    "applyRule": true,
    "calc": false,
    "nesting": true,
    "customMedia": true,
    "mediaQueriesRange": true,
    "customSelectors": true,
    "attributeCaseInsensitive": true,
    "colorRebeccapurple": true,
    "colorHwb": true,
    "colorGray": true,
    "colorHexAlpha": true,
    "colorFunction": true,
    "fontVariant": true,
    "filter": true,
    "initial": true,
    "rem": true,
    "pseudoElements": true,
    "pseudoClassMatches": true,
    "pseudoClassNot": true,
    "pseudoClassAnyLink": true,
    "colorRgba": true,
    "overflowWrap": true
  },
  "file-type-typescript": "{\"compilers\":[\"typescript\",\"uglify-js\"]}",
  "babel": {
    "useBabelRc": true,
    "presets": {
      "babel-preset-es2015": true
    },
    "plugins": {
      "babel-plugin-syntax-jsx": true,
      "babel-plugin-transform-react-jsx": true,
      "babel-plugin-transform-async-to-generator": true,
      "babel-plugin-transform-class-properties": true,
      "babel-plugin-transform-object-rest-spread": true
    }
  },
  "file-type-png": "{\"compilers\":[\"png\"]}",
  "file-type-jpg": "{\"compilers\":[\"jpg\"]}"
}

Answer 1

Github 页面仅提供静态文件(*.html、*.css、*.js)。 Github 页面允许使用静态站点生成器 Jekyll .这样您就可以将元素推送到 Github 并进行构建。

如果您将代码推送到 Github，希望使用 Prepros 编译您的 SASS 文件，那将不会发生。您必须在您的机器上编译并将该静态文件推送到 Github。

Github 解释得比我好here on pages.github.com