ошибка webpack: файл для импорта не найден или не читается: bourbon, как исправить?

Я пытаюсь загрузить пакет 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"; ^ Файл для импорта не найден или не читается: 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: не удалось скомпилировать.

Почему не удается найти компонент бурбона? Вот ссылка на код


javascript angular webpack-3 webpack-2
person bier hier    schedule 23.02.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Обновление за июнь 2021 г.: В версии 8.0.0 команда разработчиков sass-loader решила переместить все параметры, связанные с SASS, в sassOptions объект внутри 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"]
            }
        }]
    }]
}
person connexo    schedule 24.02.2018
comment
Похоже, вам не хватает объекта sassOptions (возможно, это изменение в более новых версиях?): { loader: "sass-loader", options: { sassOptions: { includePaths: ["absolute/path/a", "absolute/path/b"],},}, } Docs: github.com/webpack-contrib/sass-loader#sassoptions - person Wayrex; 03.06.2021
comment
Спасибо за указание, похоже, разработчики sass-loader изменили это с помощью v8.0.0. Обновил ответ. - person connexo; 03.06.2021