Webpack - come configurare il percorso della directory di base per sass loader?

Question

Sto provando a seguire alcuni tutorial e documentazione e ho creato il pacchetto web per me sass file in file CSS separati.

E tutti i tipi di opere, finché io sto dimostrando piena percorso relativo in richiedono:

require("../sass/ss.scss")

Ma voglio usare:

require("./ss.scss")

ed io gira il commento di "sassLoader" nella configurazione, viene visualizzato l'errore:

[1] "sassLoader" is not allowed

Come potete vedere ho cercato di utilizzare le impostazioni di linea troppo:

sourceMap&includePaths[]=' + (PATHS.sass)

ma vengono ignorati.

Cosa sto sbagliando?

const path = require('path'); 
 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
 
const validate = require('webpack-validator'); 
 
const merge = require('webpack-merge'); 
 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
 

 
const PATHS = { 
 
    app: path.join(__dirname, 'app'), 
 
    js: path.join(__dirname, 'app', 'js'), 
 
    sass: path.join(__dirname, 'app', 'sass'), 
 
    build: path.join(__dirname, 'build') 
 
}; 
 

 
const common = { 
 

 
    // Entry accepts a path or an object of entries. 
 
    // We'll be using the latter form given it's 
 
    // convenient with more complex configurations. 
 
    entry: { 
 
    app: path.join(PATHS.js, 'index.js') 
 
    }, 
 
    output: { 
 
    path: PATHS.build, 
 
    filename: '[name].js' 
 
    }, 
 
    plugins: [ 
 
    new HtmlWebpackPlugin({ 
 
     title: 'Webpack demo' 
 
    }), 
 
    new ExtractTextPlugin(
 
     '[name].css', { 
 
     allChunks: true 
 
     } 
 
    ), 
 
    ], 
 
    devtool: "source-map", 
 
    module: { 
 
    loaders: [ 
 
     { 
 
     test: /\.scss$/, 
 
     loader: ExtractTextPlugin.extract(
 
      'style!css?sourceMap!sass?sourceMap&includePaths[]=' + (PATHS.sass) 
 
     ) 
 
     } 
 
    ] 
 
    } 
 
    // sassLoader: { 
 
    // includePaths: [PATHS.sass] 
 
    // } 
 
}; 
 

 

 
var config; 
 

 
// Detect how npm is run and branch based on that 
 
switch(process.env.npm_lifecycle_event) { 
 
    case 'build': 
 
    config = merge(common, 
 
     {} 
 
    ); 
 
    break; 
 
    default: 
 
    config = merge(common, 
 
     {} 
 
    ); 
 
} 
 

 
module.exports = validate(config);

Answer 1

richiedono moduli CSS è gestita dal css-loader solo @import è gestita da sass-loader. (Ci sono grandi differenze nel loro comportamento oltre a quello, assicurati di utilizzare quello di cui hai bisogno).

Per richiedere dalla directory root, è necessario configurare resolve.root nel file di configurazione del pacchetto web. Vedi risposta: Resolving require paths with webpack

Answer 2

L'errore viene da webpack-validator perché non riconosce la proprietà sassLoader. È necessario configurare un schema extension:

const Joi = require('webpack-validator').Joi 

const schemaExtension = Joi.object({ 
    sassLoader: Joi.any(), 
}) 

module.exports = validate(config, {schemaExtension: schemaExtension})