[英]webpack's sass-loader do not find foundation scss file without underline prefix
Recently, i was working on rapid frontend development toolchain with webpack , sass , bower and foundation5 . 最近,我正在研究带有webpack , sass , bower和foundation5的快速前端开发工具链。
I encounter a problem: sass-loader only load scss file with underline prefix . 我遇到一个问题:sass-loader只加载带下划线前缀的 scss文件。
node v0.12.4 节点v0.12.4
webpack 1.9.11 webpack 1.9.11
node-sass 3.2.0 node-sass 3.2.0
sass-loader 1.0.2 sass-loader 1.0.2
os gentoo 3.18 os gentoo 3.18
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'
};
@import "settings";
@import "normalize";
@import "foundation/components/panels";
@import "foundation/components/type";
empty file
- bower_componets - bower_componets
- package.json - package.json
- src - src
-- style - 风格
--- test.scss --- test.scss
--- settings.scss --- settings.scss
- webpack.config.js - webpack.config.js
When i run webpack command, i got error: 当我运行webpack命令时,我收到错误:
ERROR in ../~/css-loader!../~/sass-loader?outputStyle=expanded&includePaths[]=/home/ray/test/testsassloader/bower_co mponents/foundation/scss!./style/test.scss 错误在../~/css-loader!../~/sass-loader?outputStyle=expanded&includePaths[]=/home/ray/test/testsassloader/bower_co mponents / foundation / scss!./ style / test.scss
Module build failed: @import "normalize"; 模块构建失败:@import“normalize”; ^ File to import not found or unreadable: ./_normalize.scss in /home/ray/test/testsassloader/src/style/test.scss (line 2, column 9) @ ./style/test.scss 4:14-220 ^要导入的文件未找到或不可读:/home/ray/test/testsassloader/src/style/test.scss中的./_normalize.scss(第2行,第9列)@ ./style/test.scss 4:14- 220
Though, i copy bower_components/foundation/scss/normalize.scss to bower_components/foundation/scss/_normalize.scss , it works. 虽然,我将bower_components / foundation / scss / normalize.scss复制到bower_components / foundation / scss / _normalize.scss ,但它确实有效。
So i try to run by node-sass without _normalize.scss: 所以我尝试在没有_normalize.scss的情况下运行node-sass:
./node_modules/node-sass/bin/node-sass --include-path=$(pwd)/bower_components/foundation/scss/ src/style/test.scss
It works!!! 有用!!!
I conclude that it was the webpack resolver cause the problem!! 我得出结论,这是webpack解析器引起的问题!! Any one could help me solve the problem? 任何人都可以帮我解决问题? Did the copy do the right job? 副本做得对吗?
At webpack.config add the bower components dir to resolve modulesDirectories, 在webpack.config中添加bower组件目录来解析modulesDirectories,
{
...
resolve: {
modulesDirectories: ['./bower_components', 'node_modules']
},
module: {
...
}
...
}
Then, import foundation like so at test.scss: 然后,在test.scss中导入这样的基础:
@import "settings";
@import "~foundation/scss/normalize";
@import "~foundation/scss/foundation";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.