webpack的sass-loader无法找到没有下划线前缀的基础scss文件 [英] webpack's sass-loader do not find foundation scss file without underline prefix

问题描述

最近，我正在使用 webpack ， sass ， bower 和 foundation5 开发快速前端开发工具链.

Recently, i was working on rapid frontend development toolchain with webpack, sass, bower and foundation5.

我遇到一个问题:sass-loader仅加载具有下划线前缀的scss文件.

I encounter a problem: sass-loader only load scss file with underline prefix.

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

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

项目布局

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

project layout

- bower_componets
- package.json
- src
-- style
--- test.scss
--- settings.scss
- webpack.config.js

当我运行 webpack 命令时，出现错误:

When i run webpack command, i got error:

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

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

不过，我将 bower_components/foundation/scss/normalize.scss 复制到 bower_components/foundation/scss/_normalize.scss ，它可以正常工作.

Though, i copy bower_components/foundation/scss/normalize.scss to bower_components/foundation/scss/_normalize.scss, it works.

因此，我尝试不使用_normalize.scss由node-sass运行:

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

它可以正常工作！

我得出结论，这是由webpack解析器引起的！！任何人都可以帮助我解决问题吗?副本做得对吗?

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?

推荐答案

在webpack.config中，添加Bower组件目录以解析modulesDirectory，

At webpack.config add the bower components dir to resolve modulesDirectories,

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

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

Then, import foundation like so at test.scss:

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

这篇关于webpack的sass-loader无法找到没有下划线前缀的基础scss文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！