Prepros应该将我的SASS编译成Github.io页面上的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更好地解释它。

Answer 2

没有Github页面将不会处理带有prepros的sass。它只能通过jekyll做到这一点。

但是here，你的问题是css的路径解析成了一个404页面。

https://lenocam.github.io/landing-page/ + /styles/style.css

= 404 on https://lenocam.github.io/styles/style.css

尝试使用相对路径调用css：

<link rel="stylesheet" href="./styles/style.css">

您的图像也是如此。例如：

<img src="./images/barrels.jpg" alt="">