Menu icon Foundation
Changing Import Locations of Foundation Components in _Foundation.scss

We have a project in VS that holds one main site and then several smaller sites that are built on the same core back end but have a different front end. We want to have the core foundation components in a single location that all of the sites reference. We want to do this by each site having its own app.css file that imports the various things that it needs.

From my understanding of foundation this should be as simple as changing the _foundation.scss file to import the files from a different location. So instead of being 'component/grid' it will be something along the lines of '/library/foundation/5.2/scss/foundation/components/grid' however this causes an error when I compile 'file to import not found or unreadable'

How can I change that location and still allow the file to compile?

I have tried using various different tools in VS to compile. Workbench is what we use normally but others I have tried also throw the same issue.

Foundationimportcomponents

We have a project in VS that holds one main site and then several smaller sites that are built on the same core back end but have a different front end. We want to have the core foundation components in a single location that all of the sites reference. We want to do this by each site having its own app.css file that imports the various things that it needs.

From my understanding of foundation this should be as simple as changing the _foundation.scss file to import the files from a different location. So instead of being 'component/grid' it will be something along the lines of '/library/foundation/5.2/scss/foundation/components/grid' however this causes an error when I compile 'file to import not found or unreadable'

How can I change that location and still allow the file to compile?

I have tried using various different tools in VS to compile. Workbench is what we use normally but others I have tried also throw the same issue.

This post has been closed. No new replies can be added.

Rafi Benkual almost 4 years ago

if you are using Libsass, the Gruntfile determines the path to the file that gets compiled and where it compiles to

    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'expanded'
        },
        files: {
          'css/app.css': 'scss/app.scss'
        }        
      }
    },

In Compass projects it is in config.rb

Gareth Williams almost 4 years ago

Hi Rafi Benkual,

Thank you for your response, we aren't using Libsass. Just a straight up copy of the files in the project.

The changes I make to the path are through standard editing of the file. I wonder if path of the components can be up and outside of the same folder.

Geoff Kimball almost 4 years ago

I haven't used Visual Studio, but I've helped a few folks get it working with Sass before. As I recall, VS doesn't allow you to define import paths like Compass does. This means you need to use all relative paths for your imports.

So when you say "up and outside", you're totally right! You can use ../ in a Sass @import statement to move up a directory. Here's an example of someone using Foundation's Sass in VS and doing exactly that.

Gareth Williams almost 4 years ago

Thanks Geoff,

The only way I didn't try and of course it worked. Silly me.

I suspect that using a standard relative URL would have taken it to the root of the project rather than the website, hence why it wasn't found.

Many Thanks.