Usage with Webpack

[mrmartineau]

Hi there, I am using the beta version of Webpack and it is not working. Has anyone had success using this with Webpack?

[mrmartineau]

I now realise that the above is an incredibly bad way to write an issue, so I'll offer some more clarification.

I am using the latest Webpack 2 beta (2.1.0-beta.27) by the way, I'm sure its the reason it isn't working.

This is the error I have:

ERROR in ./~/css-loader!./~/sass-loader!./assets/src/scss/kickoff.scss
Module build failed:
@import "kickoff-utils"; // https://github.com/mrmartineau/kickoff-utils.scss
^
      File to import not found or unreadable: kickoff-utils
Parent style sheet: stdin
      in /Users/mrmartineau/htdocs/trykickoff/kickoff/assets/src/scss/kickoff.scss (line 37, column 1)
 @ ./~/style-loader!./~/css-loader!./~/sass-loader!./assets/src/scss/kickoff.scss 4:14-130

This is part of my webpack.config.js (remember I'm using webpack 2)

// Eyeglass config
const eyeglass = new Eyeglass({
    // outputStyle: 'compressed',
    eyeglass: {
        root: paths.root,
        buildDir: path.resolve(paths.dist, 'css'),
    },
});

// inside the `module.rules` array
{
    test: /\.scss$/,
    use: [
        'style-loader',
        {loader: 'css-loader',},
        {loader: 'sass-loader', options: {sassLoader: eyeglass.options}},
    ],
}

[wesm87]

This is how I have things set up, I couldn't get the new rules syntax to work so I'm using webpack-combine-loaders:

const webpack = require('webpack');
const combineLoaders = require('webpack-combine-loaders');
const eyeglass = require('eyeglass');
const paths = require('./config/webpack/paths');

// Inside webpack config:
module: {
  loaders: [
    {
      test: /\.scss$/,
      include: paths.client.source,
      loader: combineLoaders([
        {
          loader: 'css-loader',
          query: {
            importLoaders: 2,
            context: paths.client.source,
          },
        },
        {
          loader: 'postcss-loader',
        },
        {
          loader: 'sass-loader',
        },
      ]),
    },
  ],
},
plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      sassLoader: eyeglass({
        // sass options...
        eyeglass: {
          // eyeglass options...
        },
      }),
    },
  }),
],

[mderoche]

Has anyone gotten this working with the stable version of Webpack 2, with the rules syntax? Similarly, does this duplicate efforts that Webpack provides? Is it worth using both simultaneously?

[orlin]

It's not working for me either. I'm getting Error: Cannot find module './menu.js.scss' ... (any of the scss files really, this is just the first file being hit). Here is my webpack 2 config:

const marked = require('marked')
const renderer = new marked.Renderer()
const eyeglass = require('eyeglass')
const LoaderOptionsPlugin = require('webpack').LoaderOptionsPlugin

module.exports = {
  webpack: (config, { dev }) => {
    config.resolve = {
      'extensions': ['.js', '.jsx']
    }
    config.module.rules.push(
      { test: /\.(md|s?css)$/,
        use: [{
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]'
          }
        }]
      },
      { test: /\.css$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader']
      },
      { test: /\.s(a|c)ss$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader', 'sass-loader']
      },
      { test: /\.md$/,
        use: [
          'html-loader',
          { loader: 'markdown-loader',
            // https://github.com/chjj/marked#options-1
            options: {
              sanitize: true,
              smartypants: true,
              renderer
            }
          }
        ]
      }
    )
    config.plugins.push(new LoaderOptionsPlugin({
      test: /\.s(a|c)ss$/,
      options: {
        sassLoader: eyeglass({
          // sass options...
          eyeglass: {
            // eyeglass options...
          }
        })
      }
    }))
    // Important: return the modified config
    return config
  }
}

This is actually a next.config.js for next.js and I have a few extras in there that have nothing to do with sass. If you want a working example similar to mine, try this one - I'm using the extra postcss processor which works fine. It's trying to add eyeglass with LoaderOptionsPlugin that breaks things.

[strarsis]

I was able to use eyeglass with sass-loader in recent webpack:

[...]
    {
        test: /\.scss$/,
        include: config.paths.assets,
        use: ExtractTextPlugin.extract({
          fallback: 'style',
          publicPath: '../',
          use: [
            `css?${sourceMapQueryStr}`,
            'postcss',
            `resolve-url?${sourceMapQueryStr}`,
            {
              loader: `sass?${sourceMapQueryStr}`,
              options: eyeglass({
                  // sass options...
                  includePaths: ['/share/scss/'],
                  eyeglass: {
                    // eyeglass options
                  }
                })
            }
          ],
        }),
      },
[...]

[mrmartineau]

@strarsis your solution works perfectly, thanks!