CODEWITHSUNDEEP
node.jssasscompressionautoprefixernpm-scripts
Pizzicato
Pizzicato

Reputation: 1621

Sass to compressed CSS with sourcemaps and autoprefix

I'm using npm scripts to do all my front-end tasks, because I'd like not to use gulp or grunt, or any other task manager.

There's a main.scss file that imports all other SCSS or CSS modules and I'd like to get all my SCSS and CSS source code compiled, autoprefixed, compressed and "sourcemapped".

These npm script was working, but suddenly, the sourcemap file stopped listing the sources, maybe due to a bug in node-sass after updating...

"build:styles": "node-sass --source-map-embed --source-map-root file://${PWD}/ --output-style expanded html/assets/src/styles/main.scss | postcss -u autoprefixer -b 'latest 2 versions' -o html/assets/styles/main.css --map html/assets/styles/main.css.map && cleancss html/assets/styles/main.css -o html/assets/styles/main.min.css"

Is there a good way to get this done? Using node-sass, and postcss seems too complicated...

Upvotes: 0

Views: 1685

Answers (1)

Pizzicato
Pizzicato

Reputation: 1621

I solved this using this commands:

node-sass --output-style expanded html/assets/src/styles/main.scss html/assets/styles/main.css  --source-map html/assets/styles/main.css.map && postcss -u autoprefixer -b 'latest 2 versions' -o html/assets/styles/main.min.css < html/assets/styles/main.css && cleancss html/assets/styles/main.css -o html/assets/styles/main.min.css

Not as clean as I wanted it to be but it works.

Upvotes: 2

Related Questions