Должен ли Препрос работать над компиляцией моего SASS в CSS на странице Github.io?Если это так, что может привести к тому, что мой стиль SASS не будет работать на странице Github.io? - PullRequest
0 голосов
/ 20 сентября 2018

Мой проект стилизован так, как я хочу, чтобы он был локально.После отправки его на 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\"]}"
}

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Никакие страницы Github не будут обрабатывать sass с подготовкой.Он может сделать это только с jekyll .

Но здесь , ваша проблема в том, что путь к вашему 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="">
0 голосов
/ 20 сентября 2018

Github-страницы обслуживают только статические файлы (* .html, * .css, * .js).Страницы Github позволяют использовать статический генератор сайтов Jekyll .Таким образом, вы можете отправить проект на Github и выполнить сборку.

Если вы отправляете код на Github в надежде скомпилировать файл SASS с Prepros, этого не произойдет.Вы должны скомпилировать на своем компьютере и отправить эти статические файлы в Github.

Github может объяснить это лучше, чем я здесь, на pages.github.com

...