Im trying to get the node-sass-middleware working with with express. The app runs with no errors
...(modules)
var sassMiddleware = require('node-sass-middleware');
var routes = require('./routes/index');
var app = express();
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
//---- LOAD SASS -----//
// adding the sass middleware
var srcPath = __dirname + '/scss';
var destPath = __dirname + '/public/stylesheets';
app.use(sassMiddleware({
src: srcPath,
dest: destPath,
debug: true,
outputStyle: 'compressed'
}));
app.use(express.static(path.join(__dirname, 'public')));
Can anyone see anything wrong with the way I'm attempting to compile the sass?
file structure :
app
controllers
routes
public
-stylesheets
scss
...
Sass is a stylesheet language; it's just the syntax and definition. Dart-Sass and Node-Sass[1] are implementations. According to the Sass language website Dart Sass is the primary implementation of Sass. Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation.
Yes, we can compile SCSS/SASS to CSS without using any Node Command.
This is how app.js should be:
app.use(sassMiddleware({
src: srcPath,
dest: destPath,
debug: true,
outputStyle: 'compressed'
}),
express.static(path.join(__dirname, 'public')));
Also your main scss file should be named style.scss and be inside scss/stylesheets/ directory.
You should see a log like this, if you have correctly loaded the module:
source : /Users/abc/Desktop/SO/SO_node/scss/stylesheets/style.scss
dest : /Users/abc/Desktop/SO/SO_node/public/stylesheets/stylesheets/style.css
read : /Users/abc/Desktop/SO/SO_node/public/stylesheets/stylesheets/style.css
render : /Users/abc/Desktop/SO/SO_node/scss/stylesheets/style.scss
A problem could also be that you want to compile scss
instead of sass
. Therefore set indentedSyntax
to false
.
app.use(require('node-sass-middleware')({
src: path.join(__dirname, 'scss'),
dest: path.join(__dirname, 'public'),
indentedSyntax : false,
sourceMap: true
}));
Or remove it completly. Express-generator adds this value on default.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With