Recently, i was working on rapid frontend development toolchain with webpack, sass, bower and foundation5.
I encounter a problem:
sass-loader only load scss file with underline prefix.
Environments
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";
settings.scss
empty file
project layout
– bower_componets
– package.json
– src
— style
— test.scss
— settings.scss
– webpack.config.js
When i run webpack command, i got error:
ERROR in
../~/css-loader!../~/sass-loader?outputStyle=expanded&includePaths[]=/home/ray/test/testsassloader/bower_co
mponents/foundation/scss!./style/test.scss
Module build failed: @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
Though, i copy bower_components/foundation/scss/normalize.scss to bower_components/foundation/scss/_normalize.scss, it works.
So i try to run by node-sass without _normalize.scss:
./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!!
Any one could help me solve the problem? Did the copy do the right job?
Best Answer
At webpack.config add the bower components dir to resolve modulesDirectories,
Then, import foundation like so at test.scss: