I am having issues importing compass, it's definitely installed (gem list confirms that), breakpoint and susy work fine but it doesn't like the compass import...
Error:
Error: File to import not found or unreadable: compass.
Load paths:
/Users/xx/dev/roomfully/listaroom-app
/Users/xx/.rvm/gems/ruby-2.1.1/gems/susy-2.2.2/sass
/Users/xx/.rvm/gems/ruby-2.1.1/gems/breakpoint-2.5.0/stylesheets
on line 1 of public/sass/app.scss
Use --trace for backtrace.
Gruntfile
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
options: {
require: [
'susy',
'breakpoint',
'compass',
'compass-normalize'
]
},
files: {
'public/app.css': 'public/sass/app.scss'
}
}
},
watch: {
dist: {
files: 'public/sass/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
}
app.scss
#import 'compass';
#import 'compass-normalize';
#import 'breakpoint';
#import 'susy';
body {
display: none
}
There is an answer about this question, File to import not found or unreadable: compass, but before you check this link, maybe you can try to set sass option "compass: true", like this:
sass: {
options: {
compass: true
}
}
I solved this problem as below :-
There was a problem of path resolution by compass as all the paths mentioned are relative paths of the dependencies. Try to make the total path length smaller.
I had too much hierarchical folder structure as a result when the total path was resolved, it was greater than the allowed length.
try putting your folder(containing the whole project structure) directly in C drive.
To add on top of your answer #pramod, The error that blocks compass build is "File to import not found or unreadable: compass" is because NTFS limitation of 256 characters on path strings.
This also happened to me importing theme sass files about my app sources that must respect my project hierarchy.
I think that compass resolve the absolute path concatenating relative ones, wasting a lot of chars ("C:\a\b\c....\b\c\d" instead of "C:\a\b\c\d").
Related
I'm trying to migrate from the now dead Tachyons framework to Tailwindcss. However, there's one block I haven't figured out how to overcome.
I use the jekyll-postscss Gem to enable postscss processing during jekyll build. Things appear to work well with the following setup:
assets/css/styles.css:
---
---
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
postcss.config.js:
module.exports = {
parser: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
...(process.env.JEKYLL_ENV == "production"
? [require('cssnano')({ preset: 'default' })]
: [])
]
};
tailwind.config.js:
module.exports = {
purge: [
'./_includes/**/*.html',
'./_layouts/**/*.html',
'./_posts/*.md',
'./*.html',
],
darkMode: false,
theme: {
extend: {},
},
variants: {},
plugins: [
require('#tailwindcss/typography'),
],
}
With a jekyll build command, I can see the correctly generated styles.css file under _site/assets/css.
However, it doesn't work when I try to import other css or scss files. For example, if I modify the styles.css file into the following
assets/css/styles.scss:
---
---
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
#import "test.css"
where test.css is in the same directory as styles.scss (assets/css/), postcss-import throws an exception
Error: Failed to find './test.css'
in [
/project
]
at /project/node_modules/postcss-import/lib/resolve-id.js:35:13
at async LazyResult.runAsync (/project/node_modules/postcss/lib/lazy-result.js:396:11)
I'm a bit confused as to why postcss-import does not see this file.
Because the css resource you imported is not in the resolved path, the default resolved path includes: root directory, node_modules, etc. Other paths can refer to the official documentation link.
You can try the following methods to solve this problem:
Modify the postcss configuration file postcss.config.js
module.exports = {
...
require('postcss-import')({
addModulesDirectories: ["assets/css"]
}),
...
};
Modify the main style file assets/css/styles.css
#import "assets/css/test.css"
I used a similar solution to what Donnie suggests, but I set the path instead of the addModulesDirectories, which resolved the issue for me. I didn't try the addModulesDirectories, so I don't know whether that might have also worked.
module.exports = {
...
require('postcss-import')({
path: ["assets/css"]
}),
...
};
I'm setting up a Gatsby Project with gatsby-plugin-sass.
my gatsby-config.js file:
module.exports = {
plugins: [
'gatsby-plugin-resolve-src',
'gatsby-plugin-sass',
'gatsby-plugin-react-helmet',
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets/images`,
},
},
],
}
I have the following styles file structure:
|
|src
|-styles
|--base
|--- _variables.scss
|--components
|--- _Buttons.scss
|--- ...
|--main.scss
Im my _Buttons.scss file I'm importing like this:
#import '../base/variables';
#use 'sass:color as *;
When I'm trying to use the sass color functions like this (as specified on https://sass-lang.com/documentation/modules)
%buttons-focus {
background-color: color.adjust($primary-color, $alpha: -0.5);
}
I get the following Error:
Invalid CSS after "...nd-color: color": expected expression (e.g. 1px, bold), was ".adjust($primary-co"
In my main.scss I'm importing styles like this:
#import './components/Buttons';
Am I overseeing something?
I've tried changing up #use with #import, with no luck. For me it seems like the gatsby-sass-plugin is not aware of sass modules.
gatsby-plugin-sass uses node-sass under the hood. But in order to support built-in modules with #use, you need to configure gatsby-plugin-sass to use dart-sass instead. See below.
Built-In Modules - sass-lang
Only Dart Sass currently supports loading built-in modules with #use. Users of other implementations must call functions using their global names instead.
Alternative Sass Implementations - gatsby-plugin-sass
By default the node implementation of Sass (node-sass) is used. To use the implementation written in Dart (dart-sass), you can install sass instead of node-sass and pass it into the options as the implementation:
npm install --save-dev sass
gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-sass`,
options: {
implementation: require("sass"),
},
},
]
I've started working on an existing website at work that uses Sass and auto-prefixer with Grunt. I'm not 100% familiar with the files yet, but I don't want to change the structure to avoid breaking anything. The problem I'm having is that no matter what .scss files I edit, it doesn't affect the required .css file. The developers that originally built the site aren't here anymore.
The changes I make either affect file.css or file2.css, and I need to reach file.expanded.css, but there's no mention of this file in the Gruntfile, so it was either removed, or it's being compiled in another way. Obviously, I'm avoiding editing it directly. I'm just unsure if I have enough to figure this out.
In case it helps, here's the Gruntfile:
module.exports = function(grunt){
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
build: {
files: {
'assets/css/file2.css': 'assets/sass/folder/file2.sass'
}
}
},
autoprefixer: {
build: {
src: 'assets/css/file.css',
dest: 'assets/css/file.css'
}
},
watch: {
css: {
files: ['assets/sass/**'],
tasks: ['buildcss']
}
},
// Browsersync
browserSync: {
dev: {
bsFiles: {
src: [
'assets/css/*.css',
'assets/images/*',
'assets/scripts/*.js',
'**/*.html'
]
},
options: {
watchTask: true,
proxy: "site.dev:8888",
}
}
},
});
grunt.registerTask('default', ['browserSync', 'watch']);
grunt.registerTask('buildcss', ['sass', 'autoprefixer']);
};
You should install a Grunt task for source maps and recompile your CSS. I personally use Gulp so, I'm unsure what the best solution for Grunt might be, but it's a similar set up. When your CSS is compiled with source maps, you'll be able to pinpoint with your inspector where in which partial or SASS file the style declarations are coming from.
http://thesassway.com/intermediate/using-source-maps-with-sass
I'm brand new to Grunt.js, but I'm starting to get the hang of it. The main thing I'd like to do with it however, I can't seem to nail down.
My goal here, is to point grunt at a directory, and have it watch all of the matching files, and upon changes, compile them into a new single CSS file.
Here's my current gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// CONFIG =========================/
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'assets/css/style.css' : 'assets/css/sass/*.scss'
}
}
},
watch: {
css: {
files: 'assets/css/sass/*.scss',
tasks: ['sass']
}
}
});
// DEPENDENT PLUGINS =========================/
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
// TASKS =====================================/
grunt.registerTask('default', ['watch']);
};
Thus far I've been using grunt-contrib-watch, and grunt-contrib-sass. I've tried compass, as well as directory import but I couldn't get either of them to do what I'm trying to do either.
At the end of the day, I'm really just trying to avoid writing an import file, both because source order isn't going to matter for the way I'm writing my SASS, and becuase I'd really like to know how to make this happen.
I'm not sure of a way to do exactly what you want to achieve by just using Sass and Grunt-Contrib-Sass but you can achieve something similar by using Sass-Globbing, a SASS plug-in that lets you import entire directories. To use the plug-in, you'd use the require option in Grunt-Contrib-Sass and you'd have it target a main styles.scss file that may look something like:
#import "vendor/*";
#import "modules/*";
#import "partials/*";
And then your grunt file would have something like:
sass: {
dist: {
options: {
require: 'sass-globbing'
},
files: {
'assets/css/style.css' : 'assets/css/sass/style.scss'
}
}
}
I have installed foundation 5 with bower. by compass watch there is no problem to compile foundation files but when i want to use grunt-sass plugin, i see this error:
Running "sass:development" (sass) task
Warning: C:\wamp\www\nik\myapp/scss/app.scss:2: error: file to import not found or unreadable: "foundation"
Use --force to continue.
Aborted due to warnings.
Line 2 of app.scss is #import "foundation".
And grunt-sass in my Gruntfile.js:
sass: {
development: {
options: {
outputStyle: 'nested'
},
files: {
'.css/development/style.css': ['scss/app.scss', 'scss/style.scss']
}
},
production: {
options: {
outputStyle: 'compressed'
},
files: {
'.css/development/style.css': ['scss/app.scss', 'scss/style.scss']
}
}
I also tested this solution but it had no affection.
Just adding --libsass for installing foundation in command line, will cause installing foundation that is compatible with grunt:
foundation new A_PROJECT_NAME --libsass
Subsequently in grunt (after installing grunt-sass) :
sass: {
development: {
options: {
outputStyle: 'nested',
// Adding foundation source files, so we can #import them.
includePaths: ['bower_components/foundation/scss']
},
files: {
'css/style.css': ['path/to/styles/app.scss']
}
}
}
Hint: you can import your own style.scss in app.scss last line.