Как исправить файл @import scss внутри другого scss с помощью Webpack - PullRequest
Новая
       55

Как исправить файл @import scss внутри другого scss с помощью Webpack

0 голосов
/ 28 сентября 2019

Я использую Webpack для компиляции своих файлов SCSS, основываясь на простейшем способе: 

module.exports = {
  entry: './src/home.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader', 
          'css-loader',
          'sass-loader',
        ]
      }
    ]
  }
};

Полное содержимое src/home.js файла: 

import 'library_name/src/assets/scss/styles.scss';

Фрагмент styles.scss содержит кодкак показано ниже: 

@import '../../../node_modules/bootstrap/scss/bootstrap.scss';

Итак, когда я запускаю команду webpack, я получаю сообщение об ошибке:

SassError: Файл для импорта не найден или не читается: ../../../node_modules/bootstrap/scss/bootstrap.scss.
в строке 5 ... \ node_modules \ имя_библиотеки \ src \ assets \ scss \ styles.scss

1 Ответ

0 голосов
/ 29 сентября 2019

https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules

Итак, для начальной загрузки:

@import "~bootstrap/scss/bootstrap.scss";

...