gruntjs / grunt-contrib-compass

Compile Compass to CSS.
http://gruntjs.com/
MIT License
626 stars 128 forks source link

grunt-contrib-compass fails with compass css3 mixins #238

Closed silicakes closed 8 years ago

silicakes commented 9 years ago

The Issue

While requesting a css3 mixin located under: /Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/_css3.scss

the following error appears:

Running "compass:dist" (compass) task
error src/styles/main.scss (Line 251 of src/styles/_theme.scss: Undefined mixin 'border-image'.)
Compilation failed in 1 files.
Warning: ↑ Use --force to continue.

Environment

compass: {
        options: {
            sassDir: 'src/styles',
            cssDir: 'dist/styles',
            generatedImagesDir: 'dist/images/generated',
            imagesDir: 'src/images',
            javascriptsDir: 'src/scripts',
            fontsDir: 'src/fonts',
            importPath: './bower_components',
            httpImagesPath: '/images',
            httpGeneratedImagesPath: '../images/generated',
            httpFontsPath: '/fonts',
            relativeAssets: false,
            assetCacheBuster: false,
            raw: 'Sass::Script::Number.precision = 10\n'
        },
        dist: {
            options: {
                generatedImagesDir: "dist/images/generated"
            }
        }
    }

.scss declaration

.gradient-solid-hairline-border {
   @include base-border($border-color: $dark-secondary-color); //custom mixin, from somewhere above
   @include border-image(linear-gradient($light-green-color, $dark-secondary-color));
}

This issue was reproduced with additional css3 styles from the aforementioned path

silicakes commented 9 years ago

solution

Compass has a default path through which it looks for stylesheets ones it can't find it locally.

It's possible to include files from the compass spreadsheet directory with the same syntax provided by their documentation:

@import "compass/css3";

This should be added to grunt-contrib-compass' documentation