RevealJS transitions in rails - css

Question

Ive added reveal.js to my rails 7 app and with a little tinkering I can switch between slides, however the transitions (eg, slide or fade) do not work.
In terms of installation:
yarn add reveal.js
application.js
import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
let deck = new Reveal({
plugins: [ Markdown ]
})
deck.initialize();
slides html:
<div class="reveal">
<div class="slides">
<section data-transition="slide"><h1>Horizontal 1</h1></section>
<section data-transition="fade"><h1>Horizontal 2</h1></section>
</div>
</div>
What I have done/tried
I dont have any javascript errors in my console so im thinking this might just some issue with the css / the way im importing the css. so far I have tried copying the reveal.scss content (from node_modules) into a file in my assets/stylesheets/reveal.scss with no luck:
Module parse failed: Unexpected character '#' (1:0)
12:31:02 js.1 | You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
12:31:02 js.1 | > #use "sass:math";
I also tried commenting out the lines (only 3) that use the math property, however that didnt work for me.
I tried importing the css direction (in assets/stylesheets/application.scss) with:
#import "reveal.js/dist/reveal"
// and
#import "reveal.js/css/reveal"
the file in dist is a .css file, while the other one has the contents that I copied before and showed the same error regarding sass:math.
Next I thought I might not have sass so I did yarn add sass and yarn add node-sass, which also didnt make the transitions work.
Now when I open the demo.html and index.html files (that come with the reveal.js dependency in the node_modules) in a browser tab transitions work seamlessly. Meaning it must have to do with how im importing the css/scss?
EDIT: webpack.config.js
const path = require("path")
const webpack = require("webpack")
module.exports = {
mode: "production",
devtool: "source-map",
entry: {
application: "./app/javascript/application.js"
},
output: {
filename: "[name].js",
sourceMapFilename: "[file].map",
path: path.resolve(__dirname, "app/assets/builds"),
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
]
}

Answer 1

It looks like you need to install and then add the appropriate loaders to your webpack config. Here is the official webpack documentation. It would look something like this:
const path = require("path")
const webpack = require("webpack")
module.exports = {
mode: "production",
devtool: "source-map",
entry: {
application: "./app/javascript/application.js"
},
output: {
filename: "[name].js",
sourceMapFilename: "[file].map",
path: path.resolve(__dirname, "app/assets/builds"),
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
}