Препрос не компилирует css

Компиляция Sass с использованием PrePros в Windows

Затем я открыл Prepros и перетащил в свою «статическую папку», которая имеет такую ​​структуру:

• Static
  • css
  • js
  • дерзость
  • компоненты (несколько файлов в этом каталоге)
  • components.sass
  • screen.sass

  @import compass/reset @import lubalin.css @import variables @import typography @import main @import components @import elements @import shop @import blog @import sponsor @import theme 

  А содержимое файлов screen.sass выглядит так:

  В PrePros я изменил компилятор, чтобы он использовал Ruby Sass вместо Node Sass (по совету предыдущего разработчика).

  Теперь, когда я нажимаю screen.sass в PrePros и нажимаю «Обработать файл», я получаю сообщение об ошибке «Ошибка: неясно, какой файл импортировать для ‘@import» components / * «‘.

  Я нашел несколько потоков в Интернете, в которых говорилось, что это произошло из-за Windows и что подстановочный знак следует заменить на @import «components / .«, однако, когда я запускаю эту команду, я получаю ошибку » Ошибка: файл для импорта не найден или не читается: components / . «

  Как ни странно, файл, который создает prepros, т.е., кажется, прекрасно понимает, какие файлы импортировать для components.sass, потому что я вижу в файле следующий раздел:

  Поэтому кажется странным, что PrePros может сказать, какие файлы нужно импортировать, но когда я пытаюсь скомпилировать, он не понимает!

  Наконец, содержимое компаса (config.rb):

  require 'compass/import-once/activate' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "js" 

  Может ли кто-нибудь помочь новичку в Sass, который не в своей глубине, запустить PrePros !? Что я делаю неправильно?

  Заранее спасибо за ваше время

  Источник

  Не компилируется файл scss в css в Prepros?

  Добрый день!
  Помогите пожалуйста. Уже что только не делала.
  Мой Prepros почему-то не компилирует scss в css.
  Уже все, что могла проверила и саму программу переустанавливала.
  При этом в предыдущих проектах все работает.
  Писала код в scss и вдруг перестало компилировать

  Средний 12 комментариев

  

  

  Скорее всего не указали куда компилировать или отключили/забыли включить автокомпиляцию, ошибка в scss коде, но это пальцем в небо. Причин может быть множество и то что вы написали никак не способствует пониманию того, что у вас пошло не так. Посмотрите какой-нибудь гайдик на ютубе по настройке программы, если даже в такой простой программе сами разобраться не в силах.

  KprchkAneta, вкладка logs находится в самом верху окна программы. Попробуйте отредактировать файл scss и сохранить его, после можно будет логи смотреть.

  

  Добрый день! Сам столкнулся с такой проблемой, но успешно решил ее. Смотрите, в Prepros есть вкладка «Logs». В ней показана вся «история» файла, и если происходит какая-то ошибка, он сразу про нее пишет. (В моем случае, все было из-за переменной. Была вписана в style.scss, а в media.scss не работала.)

  Удачного пользования Prepros 🙂

  Источник

  Не компилируется файл scss в css в Prepros?

  Добрый день!
  Помогите пожалуйста. Уже что только не делала.
  Мой Prepros почему-то не компилирует scss в css.
  Уже все, что могла проверила и саму программу переустанавливала.
  При этом в предыдущих проектах все работает.
  Писала код в scss и вдруг перестало компилировать

  Средний 12 комментариев

  

  

  Скорее всего не указали куда компилировать или отключили/забыли включить автокомпиляцию, ошибка в scss коде, но это пальцем в небо. Причин может быть множество и то что вы написали никак не способствует пониманию того, что у вас пошло не так. Посмотрите какой-нибудь гайдик на ютубе по настройке программы, если даже в такой простой программе сами разобраться не в силах.

  KprchkAneta, вкладка logs находится в самом верху окна программы. Попробуйте отредактировать файл scss и сохранить его, после можно будет логи смотреть.

  

  Добрый день! Сам столкнулся с такой проблемой, но успешно решил ее. Смотрите, в Prepros есть вкладка «Logs». В ней показана вся «история» файла, и если происходит какая-то ошибка, он сразу про нее пишет. (В моем случае, все было из-за переменной. Была вписана в style.scss, а в media.scss не работала.)

  Удачного пользования Prepros 🙂

  Источник

  Prepros не компилирует файлы. Как исправить?

  

  При компиляции выдаёт: Господа, как исправить? Или посоветуете нормальный компилятор.

  Советую Gulp с libsass. Если не получится настроить, то Grunt — он проще.

  module.exports = function(grunt) < grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-newer'); grunt.initConfig(< uglify: < my_target: < files: < 'public_html/js/script.js': ['_/components/js/*.js'] >> >, compass: < dev: < options: < config: 'config.rb' >> >, watch: < options: < livereload: true >, scripts: < files: ['_/components/js/*.js'], tasks: ['newer:uglify'] >, sass: < files: ['_/components/sass/*.scss'], tasks: ['compass:dev'] >, html: < files: ['*.html'] >> >); grunt.registerTask('default', 'watch'); >;

  #Compass config require "susy" require "breakpoint" css_dir = "public_html/css" sass_dir = "_/components/sass" sass_options = true> javascripts_dir = "public_html/js" output_style = :compressed # or :nested or :compact or :compressed Encoding.default_external = "UTF-8"

  

  Я правильно понимаю, что Grunt может всё тоже что и, скажем, Prepros(видимо и больше), просто нужно настроить?

  Источник

  Ошибка SCSS в CSS, Prepros не могут предоставить CSS

  Я пытаюсь преобразовать файл SCSS в CSS. Я намерен преобразовать цвета, определенные в файле SCSS, в шестнадцатеричные коды в файле CSS. Я пробовал, Prepros и Koala . Оба не смогли передать файл colours.css из colours.scss . Но это был файл размером 0 байт.

  Теперь я попробовал командную строку после установки SASS через npm.

  $ sass colours.scss colours.css 

  Теперь у меня 2 новых файла

  Это единственное содержимое этого файла.

  Я взял файл colours.css из

  Так что я могу получить шестнадцатеричные коды для цветов, включенных в этот файл.

  Я включил ниже содержимое colours.scss, которое я взял из файла github. Мне нужна только часть цветов. Если возможно, помогите мне решить эту проблему.

  // Color system $white: #fff !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; $gray-400: #ced4da !default; $gray-500: #adb5bd !default; $gray-600: #6c757d !default; $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; $black: #000 !default; $grays: () !default; // stylelint-disable-next-line scss/dollar-variable-default $grays: map-merge( ( "100": $gray-100, "200": $gray-200, "300": $gray-300, "400": $gray-400, "500": $gray-500, "600": $gray-600, "700": $gray-700, "800": $gray-800, "900": $gray-900 ), $grays ); $blue: #0d6efd !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #d63384 !default; $red: #dc3545 !default; $orange: #fd7e14 !default; $yellow: #ffc107 !default; $green: #28a745 !default; $teal: #20c997 !default; $cyan: #17a2b8 !default; $colors: () !default; // stylelint-disable-next-line scss/dollar-variable-default $colors: map-merge( ( "blue": $blue, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan, "white": $white, "gray": $gray-600, "gray-dark": $gray-800 ), $colors ); $primary: $blue !default; $secondary: $gray-600 !default; $success: $green !default; $info: $cyan !default; $warning: $yellow !default; $danger: $red !default; $light: $gray-100 !default; $dark: $gray-800 !default; $theme-colors: () !default; // stylelint-disable-next-line scss/dollar-variable-default $theme-colors: map-merge( ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ), $theme-colors ); // Set a specific jump point for requesting color jumps $theme-color-interval: 8% !default; // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. $yiq-contrasted-threshold: 150 !default; // Customize the light and dark text colors for use in our YIQ color contrast function. $yiq-text-dark: $gray-900 !default; $yiq-text-light: $white !default; // fusv-disable $blue-100: tint-color($blue, 8) !default; $blue-200: tint-color($blue, 6) !default; $blue-300: tint-color($blue, 4) !default; $blue-400: tint-color($blue, 2) !default; $blue-500: $blue !default; $blue-600: shade-color($blue, 2) !default; $blue-700: shade-color($blue, 4) !default; $blue-800: shade-color($blue, 6) !default; $blue-900: shade-color($blue, 8) !default; $indigo-100: tint-color($indigo, 8) !default; $indigo-200: tint-color($indigo, 6) !default; $indigo-300: tint-color($indigo, 4) !default; $indigo-400: tint-color($indigo, 2) !default; $indigo-500: $indigo !default; $indigo-600: shade-color($indigo, 2) !default; $indigo-700: shade-color($indigo, 4) !default; $indigo-800: shade-color($indigo, 6) !default; $indigo-900: shade-color($indigo, 8) !default; $purple-100: tint-color($purple, 8) !default; $purple-200: tint-color($purple, 6) !default; $purple-300: tint-color($purple, 4) !default; $purple-400: tint-color($purple, 2) !default; $purple-500: $purple !default; $purple-600: shade-color($purple, 2) !default; $purple-700: shade-color($purple, 4) !default; $purple-800: shade-color($purple, 6) !default; $purple-900: shade-color($purple, 8) !default; $pink-100: tint-color($pink, 8) !default; $pink-200: tint-color($pink, 6) !default; $pink-300: tint-color($pink, 4) !default; $pink-400: tint-color($pink, 2) !default; $pink-500: $pink !default; $pink-600: shade-color($pink, 2) !default; $pink-700: shade-color($pink, 4) !default; $pink-800: shade-color($pink, 6) !default; $pink-900: shade-color($pink, 8) !default; $red-100: tint-color($red, 8) !default; $red-200: tint-color($red, 6) !default; $red-300: tint-color($red, 4) !default; $red-400: tint-color($red, 2) !default; $red-500: $red !default; $red-600: shade-color($red, 2) !default; $red-700: shade-color($red, 4) !default; $red-800: shade-color($red, 6) !default; $red-900: shade-color($red, 8) !default; $orange-100: tint-color($orange, 8) !default; $orange-200: tint-color($orange, 6) !default; $orange-300: tint-color($orange, 4) !default; $orange-400: tint-color($orange, 2) !default; $orange-500: $orange !default; $orange-600: shade-color($orange, 2) !default; $orange-700: shade-color($orange, 4) !default; $orange-800: shade-color($orange, 6) !default; $orange-900: shade-color($orange, 8) !default; $yellow-100: tint-color($yellow, 8) !default; $yellow-200: tint-color($yellow, 6) !default; $yellow-300: tint-color($yellow, 4) !default; $yellow-400: tint-color($yellow, 2) !default; $yellow-500: $yellow !default; $yellow-600: shade-color($yellow, 2) !default; $yellow-700: shade-color($yellow, 4) !default; $yellow-800: shade-color($yellow, 6) !default; $yellow-900: shade-color($yellow, 8) !default; $green-100: tint-color($green, 8) !default; $green-200: tint-color($green, 6) !default; $green-300: tint-color($green, 4) !default; $green-400: tint-color($green, 2) !default; $green-500: $green !default; $green-600: shade-color($green, 2) !default; $green-700: shade-color($green, 4) !default; $green-800: shade-color($green, 6) !default; $green-900: shade-color($green, 8) !default; $teal-100: tint-color($teal, 8) !default; $teal-200: tint-color($teal, 6) !default; $teal-300: tint-color($teal, 4) !default; $teal-400: tint-color($teal, 2) !default; $teal-500: $teal !default; $teal-600: shade-color($teal, 2) !default; $teal-700: shade-color($teal, 4) !default; $teal-800: shade-color($teal, 6) !default; $teal-900: shade-color($teal, 8) !default; $cyan-100: tint-color($cyan, 8) !default; $cyan-200: tint-color($cyan, 6) !default; $cyan-300: tint-color($cyan, 4) !default; $cyan-400: tint-color($cyan, 2) !default; $cyan-500: $cyan !default; $cyan-600: shade-color($cyan, 2) !default; $cyan-700: shade-color($cyan, 4) !default; $cyan-800: shade-color($cyan, 6) !default; $cyan-900: shade-color($cyan, 8) !default; // fusv-enable

  Это то, что я получаю, когда пробую использовать метод командной строки для файла -variables.scss из репозитория

  $ sass _variables.scss matrix.css Error: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem) isn't a valid CSS value. ╷ 251 │ $negative-spacers: negativify-map($spacers) !default; │ ^^^^^^^^ ╵ _variables.scss 251:35 root stylesheet 

  Источник

  Читайте также:  What is html and tagging