Grunt compass:dist task failing due to Invalid CSS in bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss

[zishon89us]

grunt build is failing by yielding following error:

error app/styles/directive.scss (Line 369 of
bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss:
Invalid CSS after "... floor(math": expected ")", was
".div($grid-gutt...")

Gruntfile.js has compass and build task like below:

grunt.initConfig({

		....
		
		compass: {
			options: {
				sassDir: '<%= yeoman.app %>/styles',
				cssDir: '.tmp/styles',
				generatedImagesDir: '.tmp/images/generated',
				imagesDir: '<%= yeoman.app %>/images',
				javascriptsDir: '<%= yeoman.app %>/scripts',
				fontsDir: '<%= yeoman.app %>/styles/fonts',
				importPath: './bower_components',
				httpImagesPath: '/images',
				httpGeneratedImagesPath: '/images/generated',
				httpFontsPath: '/styles/fonts',
				relativeAssets: false,
				assetCacheBuster: false,
				raw: 'Sass::Script::Number.precision = 10\n'
			},
			dist: {
				options: {
					generatedImagesDir: '<%= yeoman.dist %>/images/generated'
				}
			},
			server: {
				options: {
					sourcemap: true
				}
			}
		},
		
		concurrent: {
			server: [
				'compass:server'
			],
			test: [
				'compass'
			],
			dist: [
				'compass:dist',
				'imagemin',
				'svgmin'
			]
		},
 		....
	});

grunt.registerTask('build', [
		'concurrent:dist',
	]);

package.json includes:

"grunt-contrib-compass": "^1.0.0",

bower.json includes:

"bootstrap-sass-official": "^3.2.0",

Other information:

OS: Linux Ubuntu 18.10

Node: v8.17.0

NPM: v6.13.4

Ruby: ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]

Compass: Compass 1.0.3 (Polaris)

SO Link: https://stackoverflow.com/questions/71580046/grunt-compassdist-task-failing-due-to-invalid-css-in-bootstrap-sass-official-as

[Petya-Naumova-MM]

Do we have some fix for this one? I am facing the same error.

[themainframe]

This is probably because you're specifying ^3.2.0 - the ^ will mean you'll upgrade to minor versions automatically (anything matching 3.x.x, essentially). You've probably ended up with 3.4.2 or newer installed, which changed to using a new syntax for division in Sass that isn't supported by some compilers. Change your bower.json to:

"bootstrap-sass-official": "3.4.1",

You should also check any other "loose" semver specs since these are at risk of breaking when changes like this are pushed. I suppose there's a debate on whether this should have caused a major version bump but that's above my station to decide!

[Petya-Naumova-MM]

This is probably because you're specifying ^3.2.0 - the ^ will mean you'll upgrade to minor versions automatically (anything matching 3.x.x, essentially). You've probably ended up with 3.4.2 or newer installed, which changed to using a new syntax for division in Sass that isn't supported by some compilers. Change your bower.json to:

"bootstrap-sass-official": "3.4.1",

You should also check any other "loose" semver specs since these are at risk of breaking when changes like this are pushed. I suppose there's a debate on whether this should have caused a major version bump but that's above my station to decide!

Hello, thank you for the suggestion and sorry for the late response.
I just tried your suggested fix.
It actually did work. Thanks! themainframe

[prachikhadke]

I am seeing this error for 3.4.3 as well.