[英]How to include node_module css file in scss with Webpacker in rails
我不知道如何使用 webpacker 將 .css 文件添加到 my.scss 文件中。 我認為這是一個加載程序問題,但我不確定如何設置它。 我對 webpacker 和配置文件很困惑。 我查找的每件事都顯示了 webpacker 的配置文件,但我的 rails 6 配置位於 environment.js 下,語法不同,這讓我感到困惑。 我認為您可以將它們分隔在一個文件中並要求它們。 無論如何,這是問題的一部分。
所以在我的 style.scss 我有一行:
@import '~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 設置感到困惑。 任何幫助都會很棒。 這是我的 environment.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
Idk 為什么但擺脫 ~ 工作。 “~”不應該指向node_modules嗎? 我不明白為什么 ~ 適用於我在我的 scss 中擁有的所有字體真棒和其他資源。
例如我的 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';
誰能闡明為什么 ~ 對字體很棒但它對 bootstrap-datepicker 不正確? 謝謝
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.