css-loaders build not works about webpack

[chrisvfritz]

@zjhiphop Check out the docs for sass-loader. You'll need to add a loader for SCSS to use SCSS in their own files, outside of components. The only difference is that instead of the style loader, you'll use vue-style. Let me know how that works out for you. 😃

[chrisvfritz]

@zjhiphop Just checking in. Have you had a chance to see if the suggestion above worked for you?

[chrispappas]

I am trying to do this literally right now - saw your last comment pop up in real time!

If you can help with an example snippet that would be helpful. I'm trying to do:

require('src/assets/scss/main.scss')

inside my App.vue component

[chrispappas]

I actually might be on the right track here already, added the following to my webpack.base.conf.js file in the loaders array (although getting other unrelated errors so I can't quite confirm):

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

[chrisvfritz]

@chrispappas Almost. I believe this would be what you want:

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

[chrispappas]

Nice, I had actually added the stock style-loader and prepended style to the loaders array, which seems to work great. Should I replace it with vuejs/vue-style-loader instead? This seems to work just fine for my purposes at this point with the stock style-loader plugin.

[chrisvfritz]

@yyx990803 forked style-loader to fix some issues with it. I don't know a lot about that - I've just always used vue-style-loader and never had issues. 😃 Evan will be able to better explain the history behind that decision and whether it matters for you in this case.

[yyx990803]

I forked it to provide better source map support for injected style tags during development, but other than that they are largely the same.

[chrispappas]

Thanks for the help guys, much appreciated.

[chrisvfritz]

@chrispappas Excellent. Even though this is resolved, I want to keep the issue open for now. I'm considering implementing something similar to this, so that CSS preprocessor files just automatically work if the loader is installed, similar to how they do in components.

[chrisvfritz]

Resolved in #84.