Webpack - Wie konfiguriere ich den Basisverzeichnispfad für den Sass Loader?

Question

Ich versuche, einige Tutorials und Dokumentation zu folgen und lassen Sie das Webpack für mich sass Dateien in separaten CSS-Dateien erstellen.

Es alle Arbeiten, solange ich in voller relativer Pfad bin beweisen erfordern:

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

Aber es möchte ich verwenden:

require("./ss.scss")

und ich komm aus dem 'sassLoader' in der config kommentar, bekomme ich fehler:

[1] "sassLoader" is not allowed

Wie Sie sehen, ich habe Inline-Einstellungen versucht, zu verwenden:

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

aber sie ignoriert werden.

Was mache ich falsch?

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

CSS Module Erfordern von der css-loader behandelt wird, wird nur @import von sass-loader behandelt. (Es gibt große Unterschiede in ihrem Verhalten anders als das, stellen Sie sicher, dass Sie verwenden, was Sie brauchen).

Um vom Stammverzeichnis zu verlangen, müssen Sie resolve.root in der Webpack-Konfigurationsdatei konfigurieren. Siehe Antwort hier: Resolving require paths with webpack

Answer 2

Der Fehler kommt von webpack-validator, weil es die sassLoader Eigenschaft nicht erkennt. Sie benötigen ein schema extension zu konfigurieren:

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

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

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