3

I am using webpack to build my es6 app. Unfortunately I cannot find out how to bundle all the SASS files into one single file to be imported from the main html page.

At the moment I compile sass like this in my JavaScript views:

require("./../scss/main.scss")

using the following loader:

{
   test: /\.scss$/,
   loaders: ["style", "css", "sass"]
}

But this is not what I want. I'd like to have an entry for the file main.scss and then have it dumped somewhere in the project, say the public folder where the index.html file lives too and from which it can be imported.

Anyone?

nourdine
  • 7,407
  • 10
  • 46
  • 58

1 Answers1

2

You must use the extract-text-html plugin to do this. In your webpack.config.js set this:

var webpack = require('webpack'),  


ExtractTextPlugin = require("extract-text-webpack-plugin"),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  path = require('path'),
  srcPath = path.join(__dirname, 'src'),
  sassLoaders = [
    "css-loader",
    "autoprefixer-loader?browsers=last 2 version",
    "sass-loader?indentedSyntax=sass&includePaths[]=" + path.resolve(__dirname, "./src"),
  ];

For the loader and plugin I recommend:

module: {
    loaders: [
      {test: /\.scss$/, loaders: ["style", "css", "sass"]},
      {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
      {test   : /\.woff|\.woff2|\.svg|.eot|\.ttf|\.png/, loader : 'url?prefix=font/&limit=10000&name=/assets/fonts/[name].[ext]'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("main.css"),
    new webpack.NoErrorsPlugin(),
  ]

EDIT: As you use the ExtractTextPlugin it'll place a css from the sass file all bundled together in the output folder. You can place the name on the Plugin like: new ExtractTextPlugin("main.css")

Output

output: {
    path: path.resolve(__dirname, "./public"),
  },

I recommend you check also the HtmlWebpackPlugin to inject the css and js in the html automatically and the CommonsChunkPlugin so you can build all your libs into a separated js and all your code in another, it really saves some time when debugging.

Vinicius Vieira
  • 398
  • 8
  • 18
  • Where do I specify that the entry point is `main.scss` and that the output folder is `/public`? – nourdine Jul 06 '16 at 21:03
  • Updated in the edit, if still have any doubt contat me, and maybe show your config file so I can make the changes in the file to make things easier. – Vinicius Vieira Jul 07 '16 at 17:55
  • I recommend you check my answer here too to clarify about comons pulgins: http://stackoverflow.com/questions/35408898/why-is-my-webpack-bundle-js-and-vendor-bundle-js-so-incredibly-big/35413001#35413001 – Vinicius Vieira Jul 07 '16 at 17:57