Menu icon Foundation
node-sass and @import issues

Hi,

I'm trying to set up foundation for sites through NPM and the Hexo static site. I've installed foundation as an npm folder in the project alongside node-sass but the @import on util/util is giving me a headache.

I've tried manual paths, npm-sass loader and include paths but still having no joy. This is my package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.3.1"
  },
  "dependencies": {
    "foundation-sites": "^6.3.1",
    "hexo": "^3.2.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.2.0",
    "hexo-renderer-marked": "^0.2.10",
    "hexo-renderer-scss": "^1.0.2",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0"
  },
  "scripts": {
    "sass": "node-sass --include-path node_modules/foundation-sites/scss --include-path node_modules/foundation-sites/scss/util themes/landscape/source/css/style.scss"
	}
}

 

My folder structure is

project

- node modules

 --- foundation-sites

 --- hexo-render-scss (a wrapper for node-sass)

- themes

 --- landscapes

  --- source

   --- css

    --- style.scss

    --- _settings.scss

 

This is driving me nuts as I know it is a silly path issue but not a node expert so can't see how to find the relations between two paths

node-sassnodeSassimporthexo

Hi,

I'm trying to set up foundation for sites through NPM and the Hexo static site. I've installed foundation as an npm folder in the project alongside node-sass but the @import on util/util is giving me a headache.

I've tried manual paths, npm-sass loader and include paths but still having no joy. This is my package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.3.1"
  },
  "dependencies": {
    "foundation-sites": "^6.3.1",
    "hexo": "^3.2.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.2.0",
    "hexo-renderer-marked": "^0.2.10",
    "hexo-renderer-scss": "^1.0.2",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0"
  },
  "scripts": {
    "sass": "node-sass --include-path node_modules/foundation-sites/scss --include-path node_modules/foundation-sites/scss/util themes/landscape/source/css/style.scss"
	}
}

 

My folder structure is

project

- node modules

 --- foundation-sites

 --- hexo-render-scss (a wrapper for node-sass)

- themes

 --- landscapes

  --- source

   --- css

    --- style.scss

    --- _settings.scss

 

This is driving me nuts as I know it is a silly path issue but not a node expert so can't see how to find the relations between two paths

Dominik Scholz about 1 year ago

I know this has been posted a while ago, but I am experiencing quite a similar problem with the current Foundation version (6.4.4 rc1).

My custom app.scss is located under assets/scss/app.scss and it imports the general foundation.scss using the rule from above. The first lines of the foundation.scss even get imported into the compiled file. Unfortunately, all further @import rules inside the foundation files are silently ignored.

Using npm with node-sass, I have the following line in my app.scss file:

@import "../../node_modules/foundation-sites/scss/foundation";

Is there any tutorial that describes how to setup foundation/scss with node-sass?

Here is my node-sass script from package.json:

"scripts": {
    "scss": "node-sass --watch assets/scss/ --output assets/css/ --recursive"
  }

Dominik Scholz about 1 year ago

I finally got it working using only npm with node-sass. This is my script from package.json:

{
"scripts": {
    "watch-scss": "node-sass --watch assets/scss/ --output assets/css/ --include-path node_modules/foundation-sites/scss"
  }
}

 

I simply forgot to add the following (second) line to my app.scss:

@import '../../node_modules/foundation-sites/scss/foundation';

@include foundation-everything;

Additionally, I had to add "--include-path foundation/scss" to make it work.