webpack的sass-loader不会find没有下划线前缀的基础scss文件

最近,我正在开发带有webpacksassbowerfoundation5的快速前端开发工具链。

我遇到一个问题:sass-loader只加载下划线前缀的 scss文件。

环境

节点v0.12.4
webpack 1.9.11
节点sass 3.2.0
sass-loader 1.0.2
os gentoo 3.18

webpack.config.js

var webpack = require('webpack'); var path = require('path'); var getDir = function() { var args = Array.prototype.slice.call(arguments); return path.join.apply(path, [__dirname].concat(args)); }; module.exports = { // webpack options context: getDir('./src'), entry: { test: "./style/test.scss" }, output: { path: getDir('./build'), filename: "[name].js" }, module: { loaders: [ { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&includePaths[]=" + getDir('bower_components', 'foundation', 'scss')} ] }, progress: false, // Don't show progress // Defaults to true failOnError: true, // don't report error to grunt if webpack find errors // Use this if webpack errors are tolerable and grunt should continue watch: true, // use webpacks watcher // You need to keep the grunt process alive keepalive: false, // don't finish the grunt task // Use this in combination with the watch option devtool: 'eval' }; 

test.scss

 @import "settings"; @import "normalize"; @import "foundation/components/panels"; @import "foundation/components/type"; 

settings.scss

 empty file 

项目布局

– bower_componets
– package.json
– src
– 风格
— test.scss
— settings.scss
– webpack.config.js

当我运行webpack命令时,我得到错误:

错误在../~/css-loader!../~/sass-loader?outputStyle=expanded&includePaths[]=/home/ray/test/testsassloader/bower_co mponents / foundation / scss!./ style / test.scss
模块构build失败:@import“normalize”; ^文件导入找不到或不可读:./_normalize.scss /home/ray/test/testsassloader/src/style/test.scss(第2行,第9列)@ ./style/test.scss 4:14- 220

虽然,我复制bower_components /基础/ scss / normalize.scss bower_components /基金会/ scss / _normalize.scss ,它的工作原理。

所以我尝试运行没有_normalize.scss node-sass:

  ./node_modules/node-sass/bin/node-sass --include-path=$(pwd)/bower_components/foundation/scss/ src/style/test.scss 

有用!!!

我的结论是,这是webpackparsing器导致问题! 任何人都可以帮我解决问题? 副本是否做正确的工作?

在webpack.config中添加bower组件目录来parsingmodulesDirectories,

 { ... resolve: { modulesDirectories: ['./bower_components', 'node_modules'] }, module: { ... } ... } 

然后,在test.scss中像这样导入基础:

 @import "settings"; @import "~foundation/scss/normalize"; @import "~foundation/scss/foundation";