css - 实时 CSS 预览的可能性？

Question

最近我一直致力于为我的应用程序设计样式，有人告诉我使用实时预览会很棒。但是，我似乎找不到适合我特定工作环境的任何东西。

我目前在 Laravel 工作，我的应用程序在本地网络上的 Ubuntu PC 上运行。我将我的样式分为 2 个文件，一个用于元素样式，一个用于 flexbox 布局，当我保存其中一个文件时，gulp/elixir 触发器并将其从 SCSS 编译为 CSS，然后抓取规范化并将其放在一个大文件中。

大多数程序(如实时重新加载等)都会检查文件是否保存在本地，我将其保存在 Sublime text 3 中并使用 FTP 扩展上传，然后 gulp 触发并执行所有操作。

我似乎无法全神贯注于解决方案，关于如何让某种实时 CSS 预览正常工作有什么想法吗？

Answer 1

我其实不认为这会那么难。如果我有像您这样的环境，我就会这样做。

咕噜咕噜——

我会在 gulp 中设置一个开发标志来监视我的 SCSS 更改。使用Gutil标志我会检查如果 dev == true & 触发 css 的 FTP 作为 test.css 与 gulp ftp

.pipe(isDev ? .pipe(ftp({ /* settings here */ })  : gutil.noop() )

网站 Javascript -

我会根据您可以手动设置的 localstorage 设置某种触发器，以便在值为 true 时注入(inject) test.css。示例；

if ( localStorage.getItem('dev') === true ) {
  var head = document.head,
      link = document.createElement('link')

  link.type = 'text/css'
  link.rel = 'stylesheet'
  link.href = '{url}' // test.css

  head.appendChild(link);

}

因此，每次您在 SCSS 上点击保存时，它都会构建它并将其推送到服务器，如果 localstorage dev 设置为 true，您的 javascript 应该将 test.css 注入(inject)头部。这个过程会很慢，但它应该有效。