最近,我使用webpack、sass,bower和foundation5进行快速前端开发工具链。
我遇到一个问题:sass加载程序只加载带有下划线前缀的scss文件。
环境
node v0.12.4
webpack 1.9.11
node 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";
设置.scs
empty file
项目布局
-bower_componets
-package.json
-src
--样式
---test.scs
---设置.scs
-webpack.config.js
当我运行webpack命令时,我得到错误:
中的错误../~/css加载程序/~/sass加载器?outputStyle=展开&includePaths[]=/home/ray/test/testsassloader/bower_co组件/基金会/scs/样式/测试.scs
模块构建失败:@import"normalize";^找不到或无法读取要导入的文件:/_normalize.scss在/home/ray/test/testsassloader/src/style/test.scss(第2行,第9列)@中/style/test.scss 4:14-220
尽管如此,我将bower_components/foundation/scs/normalize.scss复制到bower-components/fiundation/scss/_normalize.css 所以我尝试在没有_normalize.css的情况下通过节点sass运行: 它有效 我得出的结论是,是webpack解析器造成了问题!!有人能帮我解决这个问题吗?复印件做得对吗? ./node_modules/node-sass/bin/node-sass --include-path=$(pwd)/bower_components/foundation/scss/ src/style/test.scss
在webpack.config中添加bower组件目录以解析模块目录,
{
...
resolve: {
modulesDirectories: ['./bower_components', 'node_modules']
},
module: {
...
}
...
}
然后,在test.scss:中导入这样的基础
@import "settings";
@import "~foundation/scss/normalize";
@import "~foundation/scss/foundation";