JS error when importing scss

[subpublic]

Description

I'm using the ES6 skeleton, importing scss files in js like this:
```import 'styles/main.scss';````

Expected behavior

No JS error is expected...
And I expect that the compiled app.js shouldn't include
require('styles/main.scss');
(which it does)

Actual behavior

The compiled scss ends up in public/app.css. (works as expected)

I'm getting an error
Uncaught Error: Cannot find module 'styles/main.scss' from 'initialize.js'
But only in the browser (chrome), not in brunch build process.

Environment

1. Brunch: 2.9.1
2. Node: v6.2.2
3. NPM: 3.8.6
4. Operating system:

package.json contents

  "devDependencies": {
    "auto-reload-brunch": "^2.0.0",
    "autoprefixer": "^6.5.3",
    "babel-brunch": "~6.0.0",
    "babel-preset-es2015": "~6.3.13",
    "brunch": "^2.4.0",
    "clean-css-brunch": "^2.0.0",
    "css-brunch": "^2.0.0",
    "javascript-brunch": "^2.0.0",
    "postcss-brunch": "^2.0.5",
    "sass-brunch": "^2.7.0",
    "uglify-js-brunch": "^2.0.0"
  }

brunch config contents

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': /^(?!app)/,
        'app.js': /^app/
      }
    },
    stylesheets: {joinTo: 'app.css'}
  },

  plugins: {
    sass: { mode: 'native' },
    babel: {presets: ['es2015']}
  }
};

[shvaikalesh]

Hello there, @subpublic and thanks for creating the issue.

I don't see cssModules enabled in your config and guessing you just want to link your component's stylus with its code like you would do in Webpack.

In Brunch, we don't think that using import in this way is cool: putting .js and .scss in the same dir with the same names seems enough for me. All stylesheets will be joined and copied to app.css, no imports are necessary.

Hope that helps.

[shvaikalesh]

Please reopen if you have issues with using css-modules + Brunch.