sass converting import to import url

Question

New to sass and grunt. All my vendor related css files are in _vendor.scss.

@import "public/css/bower_components/bootstrap/dist/css/bootstrap.css";

this converted to main.css

@import url(public/css/bower_components/bootstrap/dist/css/bootstrap.css);

i want it to be

@import "public/css/bower_components/bootstrap/dist/css/bootstrap.css";

instead of url how to do it . cause next i want to use cssjoin to concatinate all import css into one file and cssmin using grunt.

folder structure

public ---> scss --->vendor-> _vendor.scss
public ---> css ---> bower_components --> ......
public ----> css ---> main.css

grunt tasks

    sass: {
        dist: {
            files: {
                'public/css/main.css': 'public/scss/main.scss'
            }
        }
    },

    autoprefixer: {
        dist: {
            options: {
                map: true
            },
            files: {
                'public/css/main.css': 'public/css/main.css'
            }
        }
    },

    watch: {
        css: {
            files: '**/*.scss',
            tasks: ['sass', 'autoprefixer']
        }
    },

You'll have to possibly show us more code and your file structure. It seems like it's not finding the css file at that address so it's assuming it's a URL. — Kodie Grantham, Nov 02 '16 at 20:31
Yeah, your relative paths seem to be wrong. To get to the bower_components folder from your _vendor.scss file, you would need to '../' your way up a few levels. — ppajer, Nov 02 '16 at 21:02
Ooh it's because of the file extensions I think. I'll write it up in a bit — ppajer, Nov 02 '16 at 21:20

score 2 · Answer 1 · edited May 23 '17 at 10:30

That's because apparently SASS treats CSS imports differently from SCSS imports. If you @import 'some/file.css', it will be compiled to @import url(some/file.css) because SASS wants to keep your original CSS import intact (while ironically altering it in a standard manner).

However, if you change the extension your CSS files to .scss and import them as such in your main file, the SASS compiler will do its thing and include their contents in place of the original import rule. It simply works because regular CSS syntax is also valid SCSS syntax, and it tricks the compiler into treating your import rule as an SCSS import.

Also, there seems to be no reasonably easy way to alter this behavior and apparently it's not going to change any time soon based on this ticket open since 2012 that's slowly filling up with workarounds for this exact problem.

Hope this helps!

Thank you, this solved my error that had me banging my head for hours. I've been trying to give SASS a try after becoming familiar with LESS, but I guess I'll just stick with LESS. — Turner Hayes, Dec 22 '16 at 02:14

sass converting import to import url

1 Answers1