I have installed the node-sass-middleware module on my express application, but i'm not getting that working, just because the middleware is reading an incorrect source, when i debug the console log is:
GET / 200 558.983 ms - 4651
source: /home/karim/Snippets/my-financial/public/stylesheets/sass/stylesheets/main.sass
dest: /home/karim/Snippets/my-financial/public/stylesheets/stylesheets/main.css
read: /home/karim/Snippets/my-financial/public/stylesheets/stylesheets/main.css
which both directories are wrong, why the middleware is adding the string stylesheets/ between the source/dest (..public/stylesheets/sass/) and the .sass file/.css file (main.sass and main.css)?
I have this configuration inside my app.js:
var sassMiddleware = require('node-sass-middleware');
...
...
var app = express();
app.use(sassMiddleware({
src: path.join(__dirname, 'public/stylesheets/sass'),
dest: path.join(__dirname, 'public/stylesheets'),
debug: true,
indentedSyntax: true,
outputStyle: 'pressed'
}));
Obviously this is not piling anything, becuase the directories are wrong.
Inside the ..public/stylesheets/sass/ folder i just have one file, main.sass which i want to pile and move the result outside the sass/ folder, i mean at ..public/stylesheets/.
I have installed the node-sass-middleware module on my express application, but i'm not getting that working, just because the middleware is reading an incorrect source, when i debug the console log is:
GET / 200 558.983 ms - 4651
source: /home/karim/Snippets/my-financial/public/stylesheets/sass/stylesheets/main.sass
dest: /home/karim/Snippets/my-financial/public/stylesheets/stylesheets/main.css
read: /home/karim/Snippets/my-financial/public/stylesheets/stylesheets/main.css
which both directories are wrong, why the middleware is adding the string stylesheets/ between the source/dest (..public/stylesheets/sass/) and the .sass file/.css file (main.sass and main.css)?
I have this configuration inside my app.js:
var sassMiddleware = require('node-sass-middleware');
...
...
var app = express();
app.use(sassMiddleware({
src: path.join(__dirname, 'public/stylesheets/sass'),
dest: path.join(__dirname, 'public/stylesheets'),
debug: true,
indentedSyntax: true,
outputStyle: 'pressed'
}));
Obviously this is not piling anything, becuase the directories are wrong.
Inside the ..public/stylesheets/sass/ folder i just have one file, main.sass which i want to pile and move the result outside the sass/ folder, i mean at ..public/stylesheets/.
1 Answer
Reset to default 12That is because -- i am pretty sure -- on your html file there is something like that:
<head>
<!--All your head stuff and-->
<link rel="stylesheet" href="/stylesheets/main.css"/>
</head>
-- Lets call that href as yourAwesomeHref for a moment.
When your server receive any get request, the middleware will look for the piled main.sass on /home/karim/Snippets/my-financial/public/stylesheets (dest option for the middleware) following by yourAwesomeHref, resulting this route:
/home/karim/Snippets/my-financial/public/stylesheets/stylesheets/main.css
Which that file obviously does not exist at all!
So you have to add prefix: "/stylesheets" on your middleware for avoid that problem.
The final code is:
var sassMiddleware = require('node-sass-middleware');
...
...
var app = express();
app.use(sassMiddleware({
src: path.join(__dirname, 'public/stylesheets/sass'),
dest: path.join(__dirname, 'public/stylesheets'),
debug: true,
indentedSyntax: true,
outputStyle: 'pressed',
prefix: '/stylesheets'
}));