Why am I not being able to compile SASS with Webpack?
The reason this is happening, is because Vue automatically generates loader configurations for CSS, SASS/SCSS, Stylus.
(See projectRoot/build/utils.js lines ~10 through ~50)
So you're seeing the error because you have a webpack loader that is attempting to import the file and then Vue is attempting to import the (already loaded) file. So you can think of your loader chain as sass -> css -> style -> sass -> css -> vue-style
In order to resolve this issue you have to get rid of the loader that you added:
{ test: /\.scss$/, loaders: ['style', 'css', 'sass']},and just rely on the provided loader.
You can load your stylesheet in one of two ways:
NOTE: You MUST use
scssinstead ofsass, assasswill attempt to parse your stylesheet using the indented syntax instead of the bracket syntax.
1:
<style lang="scss"> @import './styles/main.scss</style>2:
<style src="./styles/main.scss"></style>Both of these will import the stylesheet, the latter just prevents you from adding any additional styling to the component.