Как включить файл node_module css в s css с Webpacker в рельсах

Question

Я не могу понять, как добавить файл. css в мой файл .s css с помощью webpacker. Я думаю, что это проблема загрузчика, но я не уверен, как это настроить. Я очень запутался с webpacker и файлами конфигурации. Каждая вещь, которую я смотрю, показывает файл конфигурации для webpacker, но мои rails 6 config находятся в окружении. js с другим синтаксисом, который сбивает меня с толку. Я думаю, что вы можете просто разделить их в файле и потребовать их. В любом случае это часть проблемы.

Так что в моем стиле. css у меня есть строка:

@ import '~ bootstrap -datepicker / dist / css / bootstrap -datepicker. css ';

но я получаю эту огромную ошибку, когда пытаюсь сохранить с помощью веб-упаковщика

ERROR in ./app/webpack/stylesheets/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find '~bootstrap-datepicker/dist/css/bootstrap-datepicker.css'
  in [
    /Users/daniel/Documents/GitHub/Ojai-Oil-App/app/webpack/stylesheets
  ]
    at /Users/daniel/Documents/GitHub/Ojai-Oil-App/node_modules/postcss-import/lib/resolve-id.js:35:13
    at /Users/daniel/Documents/GitHub/Ojai-Oil-App/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/daniel/Documents/GitHub/Ojai-Oil-App/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/daniel/Documents/GitHub/Ojai-Oil-App/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/daniel/Documents/GitHub/Ojai-Oil-App/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/daniel/Documents/GitHub/Ojai-Oil-App/node_modules/postcss-loader/src/index.js:208:9
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/dist/cjs.js??ref--7-3!app/webpack/stylesheets/style.scss:

    ERROR in ./app/webpack/stylesheets/style.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/webpack/stylesheets/style.scss)
    Module build failed (from ./node_modules/postcss-loader/src/index.js):
    Error: Failed to find '~bootstrap-datepicker/dist/css/bootstrap-datepicker.css'
      in [
        /Users/daniel/Documents/GitHub/Ojai-Oil-App/app/webpack/stylesheets
      ]
        at /Users/daniel/Documents/GitHub/Ojai-Oil-App/node_modules/postcss-import/lib/resolve-id.js:35:13

Я просто очень запутался с настройкой веб-упаковщика. Любая помощь будет отличной. Это моя среда. js (конфигурация webpacker)

const { environment } = require('@rails/webpacker')
var webpack = require('webpack')
const css = require('./cssLoader')

environment.loaders.append('css', css);

environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    })
);

environment.loaders.append('jquery', {
    test: require.resolve('jquery'),
    use: [{
        loader: 'expose-loader',
        options: '$',
    }, {
        loader: 'expose-loader',
        options: 'jQuery',
    }],
});

module.exports = environment

Answer 1

ИДК почему, но избавление от ~ сработало. Разве "~" не должен указывать на node_modules? Я не понимаю, почему ~ работал для всех шрифтов удивительных и других ресурсов, которые у меня были в моем s css.

, например, мой файл s css выглядит так:

/* Font Awesome */
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; 
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';

@import 'bootstrap-datepicker/dist/css/bootstrap-datepicker.css';

Может ли кто-нибудь осветить, почему ~ работал для шрифта потрясающе, но это было неправильно для bootstrap -Datepicker? Спасибо