使用 Grunt 编译 scss 的问题，未检测到某些类的某些样式。表达引擎答案

【问题标题】：Issues with scss compiling with Grunt, not detecting certain styles for certain classes. Expression Engine使用 Grunt 编译 scss 的问题，未检测到某些类的某些样式。表达引擎
【发布时间】：2018-01-23 20:42:22
【问题描述】：

在表达式引擎中从开发分支移动到主题/CMS 分支时，使用 Grunt 编译 SCSS 时遇到奇怪的问题。

为了全面解释发生了什么，目前正在开发的网站有两个版本。一种主要是用 HTML / SCSS / Javascript 构建的，而 SCSS 正在使用 Grunt 编译成 CSS。另一个是在同一站点的表达式引擎中构建的 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 中，它正确显示了页面，粘贴在这里：

在版本 2 中，您会看到：

总之，版本 2 没有检测到 h1 样式，也没有检测到样式为“display:none;”的类“mobile-logo”。被发现。但是它正在检测其他类并正确显示它们，只有这两个类被弄乱了。除了 Grunt 发生的事情之外，我找不到任何原因导致这种情况发生……但没有错误消息。我在编译和保存时看到的只是以下内容，它看起来好像不只是编译，它被发送到我没有创建的 sass-cache 文件夹。附截图：

在网上查看关于缓存的堆栈溢出看起来这对于 sass 来说是正常的，并且有利于编译。我真的不明白这会如何引起不安，除非那里有收集某些风格的规则。以前有没有人处理过这个问题？

【问题讨论】：

标签： html css sass gruntjs expressionengine

【解决方案1】：

已解决，在 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']);

【讨论】：