I can't figure out how to add a.css file into my.scss file with webpacker. I think its a loader issue but im not sure how to set it up. I'm very confuse with webpacker and the config files. Every thing i look up shows a config file for webpacker but my rails 6 the config is under environment.js with a different syntax which is confusing me. I think you can just seperate them in a file and require them. Anyway thats part of the issue.
So in my style.scss i have the line:
@import '~bootstrap-datepicker/dist/css/bootstrap-datepicker.css';
but im getting this massive error when i try to save with 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
im just really confused with webpacker setup. Any help would be great. This is my environment.js (webpacker config)
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 why but getting rid of the ~ worked. Isn't "~" supposed to point to node_modules? i dont understand why the ~ worked for all the font awesome and other resources i had in my scss.
for example my scss file looks like now:
/* 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';
Can anyone illuminate why the ~ worked for the font awesome but it was incorrect for the bootstrap-datepicker? Thank you
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.