Webpack - cách cấu hình đường dẫn thư mục cơ sở cho trình nạp sass?

Question

Tôi đang cố gắng làm theo một số hướng dẫn và tài liệu và có webpack xây dựng cho tôi sass tập tin vào tách các tập tin css.

Nó tất cả các loại công trình, miễn là tôi đang chứng minh đầy đủ đường dẫn tương đối trong yêu cầu:

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

Nhưng tôi muốn sử dụng:

require("./ss.scss")

và tôi bật nhận xét ra 'sassLoader' trong cấu hình, tôi gặp lỗi:

[1] "sassLoader" is not allowed

Như bạn có thể thấy tôi đã cố gắng để sử dụng cài đặt inline quá:

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

nhưng họ phớt lờ.

Tôi đang làm gì sai?

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

Yêu cầu module CSS được xử lý bởi các css-loader, chỉ @import được xử lý bởi sass-loader. (Có những khác biệt lớn trong hành vi của họ khác hơn thế, hãy chắc chắn rằng bạn đang sử dụng những gì bạn cần).

Để yêu cầu từ thư mục gốc, bạn cần định cấu hình resolve.root trong tệp cấu hình webpack. Xem câu trả lời tại đây: Resolving require paths with webpack

Answer 2

Lỗi đến từ webpack-validator vì lỗi không nhận ra thuộc tính sassLoader. Bạn cần phải cấu hình một schema extension:

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

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

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