example - ¿Por qué no puedo compilar SASS con Webpack?

webpack sass to css

Question

Tengo los siguientes módulos en mi configuración de Webpack:

module: {
preLoaders: [
{
test: //.vue$/,
loader: ''eslint'',
include: projectRoot,
exclude: /node_modules/
},
{
test: //.js$/,
loader: ''eslint'',
include: projectRoot,
exclude: /node_modules/
}
],
loaders: [
{
test: //.vue$/,
loader: ''vue''
},
{
test: //.js$/,
loader: ''babel'',
include: projectRoot,
exclude: /node_modules/
},
{
test: //.json$/,
loader: ''json''
},
{
test: //.html$/,
loader: ''vue-html''
},
{
test: //.(png|jpe?g|gif|svg)(/?.*)?$/,
loader: ''url'',
query: {
limit: 10000,
name: utils.assetsPath(''img/[name].[hash:7].[ext]'')
}
},
{
test: //.scss$/,
loaders: [''style'', ''css'', ''sass'']
},
{
test: //.(woff2?|eot|ttf|otf)(/?.*)?$/,
loader: ''url'',
query: {
limit: 10000,
name: utils.assetsPath(''fonts/[name].[hash:7].[ext]'')
}
}
]
},

Puede ver que estoy usando sass-loader y para los archivos * .scss estoy definiendo este canal: [''style'', ''css'', ''sass''] .

Luego tengo mi archivo scss:

html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
(...)

Finalmente tengo mi página HTML (en un archivo VUE de vue.js) que importa ese archivo scss:

<script>
require(''./styles/main.scss'')
(...)
</script>

Pero de alguna manera me sale este error al lanzar el proyecto:

ERROR in ./~/css-loader!./~/sass-loader!./~/style-loader!./~/css-loader!./~/sass-loader!./src/styles/main.scss
Module build failed:
html {
^
Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
in /Users/td/uprank/src/styles/main.scss (line 1, column 1)
@ ./src/styles/main.scss 4:14-247 13:2-17:4 14:20-253

¿Por qué está mal la tubería? (Parece que el paquete web está intentando procesar [''css'', ''sass'', ''style'', ''css'', ''sass''] lugar de solo [''style'', ''css'', ''sass''] tal como está configurado en los módulos.

¿Qué estoy haciendo mal?

¡Gracias!

EDITAR: enlace al proyecto de ejemplo completo: https://dl.dropboxusercontent.com/u/1066659/dummy.zip

Answer 1

La razón por la que esto sucede es porque Vue genera automáticamente las configuraciones del cargador para CSS, SASS / SCSS, Stylus.

(Consulte las projectRoot/build/utils.js ~ 10 a ~ 50)

Entonces, está viendo el error porque tiene un cargador de paquetes web que está intentando importar el archivo y luego Vue está intentando importar el archivo (ya cargado). Así que puedes pensar en tu cadena de cargadores como sass -> css -> style -> sass -> css -> vue-style

Para resolver este problema, debe deshacerse del cargador que agregó:

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

y solo confíe en el cargador provisto.

Puedes cargar tu hoja de estilo de una de estas dos maneras:

NOTA: DEBE usar scss lugar de sass , ya que sass intentará analizar su hoja de estilos usando la sintaxis con sangría en lugar de la sintaxis del corchete.

1:

<style lang="scss">
@import ''./styles/main.scss
</style>

2:

<style src="./styles/main.scss"></style>

Ambos importarán la hoja de estilo, esta última simplemente evita que agregues cualquier estilo adicional al componente.