Webpack - 如何配置sass loader的基础目录路径？

我正在尝试遵循一些教程和文档，并将webpack构建为我的sass文件分隔成css文件。Webpack - 如何配置sass loader的基础目录路径？

这一切这类作品的，只要我证明完全相对路径要求：

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

但我想用：

require("./ss.scss")

和我在配置中将'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);

来源

2016-07-14 stach

进一步挖掘：不过不知道为什么“sassLoader”不能使用，但现在我敢肯定，这些在线查询参数那里的萨斯装载机。事情是：includePaths只适用于intra-scss @import语句。 – stach

要求CSS模块由css-loader处理，仅@import由sass-loader处理。（除此之外，他们的行为有很大差异，请确保您使用的是您所需要的）。

为了要求从根目录，你需要在webpack配置文件中配置resolve.root。请参阅此处的答案：Resolving require paths with webpack

来源

2016-07-25 14:35:46

错误来自webpack-validator，因为它不能识别sassLoader属性。您需要配置一个schema extension：

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

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

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

来源

2016-08-05 14:22:41

非常感谢!!!!! – juliobetta

Webpack - 如何配置sass loader的基础目录路径？

回答

相关问题