最近我一直致力于为我的应用程序设计样式,有人告诉我使用实时预览会很棒。但是,我似乎找不到适合我特定工作环境的任何东西。
我目前在 Laravel 工作,我的应用程序在本地网络上的 Ubuntu PC 上运行。我将我的样式分为 2 个文件,一个用于元素样式,一个用于 flexbox 布局,当我保存其中一个文件时,gulp/elixir 触发器并将其从 SCSS 编译为 CSS,然后抓取规范化并将其放在一个大文件中。
大多数程序(如实时重新加载等)都会检查文件是否保存在本地,我将其保存在 Sublime text 3 中并使用 FTP 扩展上传,然后 gulp 触发并执行所有操作。
我似乎无法全神贯注于解决方案,关于如何让某种实时 CSS 预览正常工作有什么想法吗?
最佳答案
我其实不认为这会那么难。如果我有像您这样的环境,我就会这样做。
咕噜咕噜——
我会在 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)头部。 这个过程会很慢,但它应该有效。
关于css - 实时 CSS 预览的可能性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37455942/