Webpack - как настроить путь к базовому каталогу для загрузчика sass?

Question

Я пытаюсь следить за некоторыми учебниками и документацией, и у меня есть webpack для sass файлов для разделения файлов css.

Это все виды работ, до тех пор, как я доказав полный относительный путь в требуют:

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

Но я хочу использовать:

require("./ss.scss")

и I повернуть комментарий в «sassLoader» в конфиге, я получаю ошибку:

[1] "sassLoader" is not allowed

Как вы можете видеть, что я пытался использовать настройки встроенных слишком:

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

, но они игнорируются.

Что я делаю неправильно?

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 обрабатывается css-loader, только @import обрабатывается sass-loader. (Есть существенные различия в их поведении, кроме этого, убедитесь, что вы используете то, что вам нужно).

Для того, чтобы потребовать от корневого каталога, вам необходимо настроить resolve.root в файле конфигурации webpack. См. Ответ здесь: Resolving require paths with webpack

Answer 2

Ошибка исходит от webpack-validator, так как она не признает недвижимость sassLoader. Вы потребуется настроить schema extension:

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

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

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