webpack's 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
- 源代码
-- 风格
--- test.scss
--- 设置.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_co分量/基础/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 组件目录来解析 modulesDirectories，

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's sass-loader 找不到没有下划线前缀的基础 scss 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！