webpack 错误：找不到要导入的文件或无法读取：波旁威士忌，如何解决？

Posted 2023-02-22

【中文标题】webpack 错误：找不到要导入的文件或无法读取：波旁威士忌，如何解决？

【英文标题】：webpack error: File to import not found or unreadable: bourbon , how to fix?

【发布时间】：2018-08-04 01:32:17

【问题描述】：

我正在尝试将 Bourbon 包加载到我的 SCSS 文件中。我正在使用 Angular 2，这是我的 webpack 3.0 配置：

var path = require("path");
var webpack = require("webpack");

module.exports = 
  devServer: 
    contentBase: path.join(__dirname, "build"),
    compress: true,
    port: 9000
  ,
  node: 
    fs: 'empty'
  ,
  cache: true,
  devtool: "eval", //or cheap-module-eval-source-map
  entry: 
    app: path.join(__dirname, "client/app", "app.js")
  ,
  output: 
    path: path.join(__dirname, "buildf"),
    filename: "ha.js",
    chunkFilename: "[name].js"
  ,
  plugins: [
    //Typically you'd have plenty of other plugins here as well
    new webpack.DllReferencePlugin(
      context: path.join(__dirname, "client"),
      manifest: require("./build/vendor-manifest.json")
    ),
  ],
  module: 
    loaders: [
      
        test: /\.js?$/,
        loader: "babel-loader",
        include: [
          path.join(__dirname, "client") //important for performance!
        ],
        exclude: [
          path.join(__dirname, "node_modules")
        ],
        query: 
          cacheDirectory: true, //important for performance
          plugins: ["transform-regenerator"],
          presets: ["es2015", "stage-0"]
        
      ,

       test: /\.(scss|sass)$/, loader: ['style-loader', 'css-loader', 'sass-loader'] ,
       test: /\.html$/, loader: 'raw-loader' ,
       test: /\.css$/, loader: 'css-loader' 
    ]
  
;

当我运行 webpack 我得到这个错误：

错误 ./node_modules/css-loader!./node_modules/sass-loader!./client/app/app.scss 模块构建失败：@import "bourbon"; ^ 找不到或无法读取要导入的文件：波旁威士忌。父样式表：stdin 在 /Users/john/NG6-starter/client/app/app.scss（第 2 行，第 1 列）@ ./client/app/app.scss 4:14-116 @ ./client/app/app.component。 js @ ./client/app/app.js @multi (webpack)-dev-server/client?http://localhost:9000./client/app/app.js webpack: 编译失败。

为什么找不到波旁威士忌成分？这是code的链接

【参考方案1】：

2021 年 6 月更新：In version 8.0.0 the development team of sass-loader has decided to move all SASS-related options to a sassOptions object inside options：

module: 
    rules: [
        test: /\.scss$/,
        use: [
            loader: "style-loader"
        , 
            loader: "css-loader"
        , 
            loader: "sass-loader",
            options: 
                sassOptions: 
                    includePaths: ["node_modules/bourbon/core"],
                
            
        ]
    ]

8.0.0 之前：

您需要将options.includePaths 传递给sass-loader：

module: 
    rules: [
        test: /\.scss$/,
        use: [
            loader: "style-loader"
        , 
            loader: "css-loader"
        , 
            loader: "sass-loader",
            options: 
                includePaths: ["node_modules/bourbon/core"]
            
        ]
    ]

【讨论】：

似乎您缺少sassOptions 对象（可能是对新版本的更改？）： loader: "sass-loader", options: sassOptions: includePaths: ["absolute/path/a", "absolute/path/b"],,, 文档：github.com/webpack-contrib/sass-loader#sassoptions

感谢您的指出，似乎 sass-loader 开发人员使用 v8.0.0 更改了这一点。更新了答案。