webpack 的 sass-loader 找不到没有下划线前缀的基础 scss 文件

Posted 2023-02-22

【中文标题】webpack 的 sass-loader 找不到没有下划线前缀的基础 scss 文件

【英文标题】：webpack's sass-loader do not find foundation scss file without underline prefix

【发布时间】：2015-09-09 08:45:22

【问题描述】：

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

我遇到一个问题： sass-loader 仅加载带有 下划线前缀的 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";

settings.scss

empty file

项目布局

- bower_componets - 包.json - 源 -- 风格 --- test.scss --- 设置.scss - webpack.config.js

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

错误 ../~/css-loader!../~/sass-loader?outputStyle=expanded&includePaths[]=/home/ray/test/testsassloader/bower_co mponents/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

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

所以我尝试在没有 _normalize.scss 的情况下通过 node-sass 运行：

 ./node_modules/node-sass/bin/node-sass --include-path=$(pwd)/bower_components/foundation/scss/ src/style/test.scss

有效！！！

我断定是 webpack 解析器导致了问题！！ 任何人都可以帮我解决问题吗？副本做得对吗？

【参考方案1】：

在 webpack.config 中添加 bower components 目录来解析 modulesDirectories，

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

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

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

【讨论】：

这是一个修复了@1.0.3 的错误。您的解决方案有效，但没有 webpack 就无法移植 scss 文件

嗨！我遇到了同样的问题，但是我已将./sass 文件夹包含在modulesDirectives 数组中，但仍然出现该错误。介意看看这里吗？ ***.com/questions/42058357/…