How to compile scss into a separate css file?

Question

I want to use a record - materialize.scss (which imports many other scss files) and compile it into a separate output file materialize.min.css .

How can I do this using webpack?

I tried a million different settings with extract-text-webpack-plugin along with css , style , sass bootloader, node-sass , resolve-url-loader , although I would get different errors, and the fix just leads to another so ... I am lost!

Answer 1

Premise

• CSS loader
• node-sass
• bicker-loader
• loader style
• text extract webpack plugin

$ npm install css-loader node-sass sass-loader style-loader extract-text-webpack-plugin --save-dev

webpack.config.js

This is my demo of webpack.config.js , change the path based on your project structure:

 const ExtractTextPlugin = require('extract-text-webpack-plugin'); const path = require('path'); const srcPath = path.join(__dirname, 'src'); const dstPath = path.join(__dirname, 'dst'); const sassLoaders = [ 'css-loader?minimize', 'sass-loader?indentedSyntax=sass&includePaths[]=' + srcPath ]; module.exports = { entry: { client: './src/js/client' }, module: { loaders: [ /*README:https://github.com/babel/babel-loader*/ { test: /\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['react', 'es2015'], cacheDirectory: true }, plugins: ['transform-runtime'] }, { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!')) }, { test: /\.(png|jpg|bmp)$/, loader: 'url-loader?limit=8192' } ] }, output: { path: dstPath, filename: '[name].js' }, plugins: [ new ExtractTextPlugin('[name].min.css') ] }; 

And a demo project on GitHub.

Answer 2

This is the webpack.config.js file that I used when I tried to compile css into a separate file

 |-- App |-- dist |-- src |-- css |-- header.css |-- sass |-- img |-- partials |-- _variables.scss |-- main.scss |--ts |-- tsconfig.json |-- user.ts |-- main.js |-- app.js |-- webpack.config.js var ExtractTextPlugin = require("extract-text-webpack-plugin"); var extractCss = new ExtractTextPlugin("css/style.css"); var autoprefixer = (require("autoprefixer"))({ browsers: ['last 2 versions'] }); var precss = require("precss"); var sugarss = require('sugarss'); var colormin = require('postcss-colormin'); var path = require("path"); module.exports = { entry: { app: ['./src/sass/main.scss', './src/main.js'] }, //devtool:"source-map", output:{ filename: "bundle.js", path: path.resolve(__dirname,"dist"), publicPath: "/dist/" }, resolve: { extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'] }, module:{ loaders:[ { test:/\.s?(a|c)ss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("css!postcss!sass") },/* { test:/\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader", "postcss-loader","precss") },*/ { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'file?hash=sha512&digest=hex&name=[hash].[ext]', 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' ] }, { test: /\.ts$/, loader: 'ts-loader' } ] }, plugins: [ new ExtractTextPlugin("bundle.css") ], postcss: function(){ return { plugins: [ autoprefixer, precss ] } } }