Compile/Export sass with webpack 2

Question

I've used Grunt and Gulp before so webpack is a bit new to me still.

Now I've configured webpack to successfully bundle my javascript perfectly. The issue I'm having now is bundling my sass and outputting the result to a file.

My understanding is that I have to use extract-text-webpack-plugin to extract the styles to its own file rather in inlining in <head>, but I'm not sure on this part. I'm looking to do the following for sass:

Compile the contents of src/main/stylesheets/**/*.scss
Output the contents to a single file app/assets/stylesheets/bundle.css

I know I can achieve this using gulp/grunt easily, but I'm trying to learn how webpack does things. My webpack.config.babel.js is as follows:

import path from "path";
import ExtractTextPlugin from "extract-text-webpack-plugin";

export default {
  entry: {
    index: path.join(__dirname, "src/main/javascripts/application.js")
  },
  output: {
    path: path.join(__dirname, "app/assets/javascripts/"),
    publicPath: "/assets/",
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        include: path.join(__dirname, "src/main/stylesheets/"),
        loader: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              query: { modules: false, sourceMaps: true }
            },
            {
              loader: "sass-loader",
              query: { sourceMaps: true }
            }
          ]
        })
      },
      {
        test: /\.js$/,
        include: path.join(__dirname, "src/main/javascripts/"),
        exclude: /node_modules/,
        use: [
          { loader:  "babel-loader" }
        ],
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin(path.join(__dirname, "app/assets/stylesheets/bundle.css"))
  ]
}

Dependencies from package.json if that matters:

  "dependencies": {
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.1",
    "babel-preset-env": "^1.1.8",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.0",
    "style-loader": "^0.13.1"
  }

are you importing your SASS via the entry point? if not, webpack won't know where to find it. — thesublimeobject, Feb 16 '17 at 06:46
@thesublimeobject Well it finds it without specifying an entry point, but throws an error `application.scss Unexpected character '@' (1:0)` — Cisco, Feb 16 '17 at 15:19

thesublimeobject · Answer 1 · 2017-02-17T04:28:56.263

0

Posting here because there isn't really room in the comments...if you have a link to the repo I might be able to be more helpful. Your syntax doesn't look wrong necessarily, but I am posting this because it's the most recent example I have that I know works: you might want to try using option instead of query. It doesn't look like query is deprecated based on the documentation, but this setup worked for me (although I wasn't using extract here),

{
    test: /\.scss$/,
    use: [
        'style-loader?sourceMap',
        {
            loader: 'css-loader',
            options: {
                sourceMap: true,
                importLoaders: 2,
            }
        },
        'postcss-loader?sourceMap',
        'sass-loader?sourceMap'
    ],
    exclude: [path.resolve('node_modules')],
},

edited Feb 17 '17 at 04:28

answered Feb 16 '17 at 15:48

thesublimeobject

1,393
1
17
22

I've tried what you posted and it runs fine without error, but still no complied css. :/. I can't exactly post a repo as its for an internal company project, but I can attach a screenshot of the directory structure: http://imgur.com/a/xZdhY – Cisco Feb 16 '17 at 17:05
Will you try adding this to you main JS entry file: `import 'path/to/stylesheets/index.scss'` ? – thesublimeobject Feb 16 '17 at 17:10
That resulted in an error unable to parse it. I've uploaded a sample project here: https://github.com/ciscoo/webpack-gradle – Cisco Feb 16 '17 at 17:34
1

I've looked into this a bit...it looks like the way your importing bootstrap is your main issue. I would look into this thread and others similar: http://stackoverflow.com/questions/36131705/preferred-way-of-using-bootstrap-in-webpack. Just search webpack + bootstrap. It seems like there is a lot of uncertainty about it. Sorry, I would put more time into this, but I don't use bootstrap and don't have an offhand solution without going through all the steps. – thesublimeobject Feb 16 '17 at 18:01
Interesting. I think it would probably be best/easier if I use gulp/grunt instead to process my js and sass. Seems that getting sass/bootstrap to work with webpack is more trouble than it's worth. Thanks! – Cisco Feb 16 '17 at 18:30
Yeah, for your setup, I think you're probably right. – thesublimeobject Feb 16 '17 at 18:30

Compile/Export sass with webpack 2

1 Answers1