从开发分支转移到Expression Engine中的主题/ CMS分支时,用Grunt编译SCSS时遇到奇怪的问题。

为了充分说明正在发生的事情,目前正在开发两个版本的网站。其中一个主要是用HTML / SCSS / Javascript构建的,并且正在使用Grunt将SCSS编译为CSS。另一个是在同一站点的Expression Engine中构建的CMS系统,因此我将第一个版本的代码过渡到其他版本,并以某种方式分解以便可以在主题中使用。

这里的问题是,在开发(版本1)版本中正确编译的CSS在CMS(版本2)版本中无法正确编译,但仅对于某些类而言,并且并非每个类都受影响。

受影响的HTML和CSS如下:



.hero {
	padding: 80px 0;
	background: $color_blue_light url('../images/90650310_temp.jpg') no-repeat top center;
	background-size: cover;

		h1 {
			font-size: 6em;
			font-weight: 900;
			line-height: 1em;
			text-align: center;
			color: white;
		}
}

.mobile-logo{
  display: none;
  }

<div class="row mobile-logo">
				<div class="col fixed-width">
					<a href="/"><img src="/assets/images/AHC_Logo.svg" /></a>
				</div>
</div>

      <div class="row hero">

		<div class="container hero-h1">
			<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id augue non felis</h1>
		</div>

	</div>





在版本1中,它正确显示了页面,粘贴在此处:html - 用Grunt编译scss的问题,未为某些类检测某些样式。表达引擎-LMLPHP

在版本2中,您会看到以下内容:html - 用Grunt编译scss的问题,未为某些类检测某些样式。表达引擎-LMLPHP

因此,总而言之,版本2不会检测h1样式,也不会检测样式“ display:none;”的类“ mobile-logo”。被发现。但是它正在检测其他类并正确显示这些类,只有这两个类被弄乱了。除了Grunt正在发生的事情之外,我找不到发生这种情况的任何原因...但是没有错误消息。在编译和保存时,我看到的仅是以下内容,似乎它不仅在编译,而且还发送到了我未创建的sass-cache文件夹中。附加的屏幕截图:html - 用Grunt编译scss的问题,未为某些类检测某些样式。表达引擎-LMLPHP

在联机和堆栈上查找有关缓存的溢出看起来对于sass来说是正常的,并且有利于编译。我真的不明白这将如何导致不高兴,除非那里有收集特定样式的规则。有人处理过吗?

最佳答案

解决后,可以在Grunt文件中找到该过程。



watch: {
		compass: {
			files: ['**/*.{scss,sass}'],
			tasks: ['compass:dev']
		}





这将在开发环境中编译SCSS。将['compass:dev']更改为['compass:prod']并创建该文件路径,将解决此问题并在正确的位置进行编译



	prod: {
	   options: {
	       sassDir: ['build/assets/sass'],
	       cssDir: ['public_html/assets/css'],
	       environment: 'production',
	       outputStyle: 'compact'
	   }
	},


grunt.registerTask('default', ['compass:prod', 'concat', 'watch']);

关于html - 用Grunt编译scss的问题,未为某些类检测某些样式。表达引擎,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48410450/

10-13 08:03
查看更多