1. casa
  2. Domanda e risposta
  3. Perché non riesco a compilare SASS con Webpack?

Perché non riesco a compilare SASS con Webpack?

2016-05-04 34 views
17

Ho i seguenti moduli nel mio config Webpack:Perché non riesco a compilare SASS con 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]') 
     } 
     } 
    ] 
    },

Si può vedere che sto usando sass-loader, e per i file * .scss io sto definendo questo gasdotto: ['style', 'css', 'sass'].

allora ho il mio file SCSS:

html { 
    height: 100%; 
} 

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

(...)

Finalmente ho la mia pagina HTML (in un file VUE da vue.js), che importa il file SCSS:

<script> 

require('./styles/main.scss') 

(...) 

</script>

Ma in qualche modo ottengo questo errore quando si avvia il progetto:

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

Perché sta mettendo male la pipeline? (Sembra webpack sta cercando di elaborare ['css', 'sass', 'style', 'css', 'sass'] invece di ['style', 'css', 'sass'] come configurato in moduli

Che cosa sto facendo di sbagliato

Grazie

EDIT:.?! link al progetto full esempio: https://dl.dropboxusercontent.com/u/1066659/dummy.zip

fonte

2016-05-04 PedroD

+0

'require ('./ styles/main.scss ') 'shoud non entrare nel tag'

Problemi correlati

 Problemi correlati