Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/401.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/29.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 网页包错误:要导入的文件找不到或无法读取:bourbon,如何修复?_Javascript_Angular_Webpack 2_Webpack 3 - Fatal编程技术网

Javascript 网页包错误:要导入的文件找不到或无法读取:bourbon,如何修复?

Javascript 网页包错误:要导入的文件找不到或无法读取:bourbon,如何修复?,javascript,angular,webpack-2,webpack-3,Javascript,Angular,Webpack 2,Webpack 3,我正在尝试将Bourbon软件包加载到我的SCSS文件中。我正在使用Angular 2,这是我的网页3.0配置: var path = require("path"); var webpack = require("webpack"); module.exports = { devServer: { contentBase: path.join(__dirname, "build"), compress: true, port: 9000 }, node:

我正在尝试将Bourbon软件包加载到我的SCSS文件中。我正在使用Angular 2,这是我的网页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_模块/css加载器/节点\模块/sass加载器/client/app/app.scss 模块构建失败:@import“bourbon”^ 要导入的文件找不到或不可读: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 (网页包)-开发服务器/客户端/client/app/app.js 网页包:未能编译


为什么找不到波旁威士忌成分?以下是2021年6月更新的链接:

8.0.0之前:

您需要将
选项传递给
sass加载器。includePath

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

似乎您缺少了
sassOptions
对象(可能是对较新版本的更改):
{loader:“sass-loader”,选项:{sassOptions:{includePaths:[“absolute/path/a”,“absolute/path/b”],},},},},}
Docs:感谢您指出,似乎sass-loader开发人员用v8.0.0改变了这一点。更新了答案。
module: {
    rules: [{
        test: /\.scss$/,
        use: [{
            loader: "style-loader"
        }, {
            loader: "css-loader"
        }, {
            loader: "sass-loader",
            options: {
                includePaths: ["node_modules/bourbon/core"]
            }
        }]
    }]
}