Javascript 如何使用rails中的Webpacker在SCS中包含节点_模块css文件

我不知道如何使用webpacker将.css文件添加到.scss文件中。我认为这是一个加载器的问题，但我不知道如何设置它。我对webpacker和配置文件非常困惑。我查找的每一个东西都会显示一个webpacker的配置文件，但是我的rails 6配置文件位于environment.js下，语法不同，这让我很困惑。我想你可以把它们分开放在一个文件里，然后要求它们。无论如何，这是问题的一部分

因此，在我的style.scss中，我有一句话：

@导入“~bootstrap datepicker/dist/css/bootstrap datepicker.css”

但是当我尝试用webpacker保存时，我遇到了这个巨大的错误

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

我只是对webpacker的设置感到困惑。任何帮助都会很好。这是my environment.js（webpacker配置）

---

Idk为什么，但摆脱了~起了作用。“~”不是应该指向节点模块吗？我不明白为什么~为我的SCS中所有的字体和其他资源工作

例如，我的scss文件现在看起来像：

/* 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';

---

有人能解释一下为什么~对字体很有用，但对引导日期选择器不正确吗？谢谢你

你确定真棒字体可以使用~？？你能检查一下你的布局中没有cdn链接，甚至没有scss文件吗

/* 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';