How to add scss loader in webpacker angular rails? - ruby-on-rails

Question

I'm trying to study rails with angular but I stock with implementing scss-loader. I already search this in google. I already add what they are trying to do, but unfortunately nothing happen and I always got this error
Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi".
I add scss.d.ts
declare module "*.scss" {
const content: string
export default content
}
and here is my environment.js
const { environment } = require('#rails/webpacker')
const typescript = require('./loaders/typescript')
environment.loaders.prepend('typescript', typescript)
environment.loaders.prepend('html', {
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
minimize: true,
removeAttributeQuotes: false,
caseSensitive: true,
customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
customAttrAssign: [ /\)?\]?=/ ]
}
}]
})
environment.loaders.prepend('style', {
test: /\.(scss|sass|css)$/,
use: [{
loader: "to-string-loader"
}, {
loader: "css-loader"
}, {
loader: "resolve-url-loader"
}, {
loader: "sass-loader"
}]
})
module.exports = environment
even add a stylesheet_pack_tag
<%= stylesheet_pack_tag 'application' %>
<div>
<default-selector></default-selector>
</div>
<%= javascript_pack_tag 'application' %>
I got error. Does my version of my sass-loader matters here?
{
"name": "acbook_angular",
"private": true,
"dependencies": {
"#angular/common": "^7.2.8",
"#angular/compiler": "^7.2.8",
"#angular/core": "^7.2.8",
"#angular/platform-browser": "^7.2.8",
"#angular/platform-browser-dynamic": "^7.2.8",
"#angular/router": "^7.2.10",
"#rails/webpacker": "^4.0.2",
"core-js": "^2.6.5",
"html-loader": "^0.5.5",
"rxjs": "^6.4.0",
"ts-loader": "^5.3.3",
"typescript": "^3.3.3333",
"zone.js": "^0.8.29"
},
"devDependencies": {
"css-loader": "^2.1.1",
"resolve-url-loader": "^3.0.1",
"sass-loader": "^7.1.0",
"to-string-loader": "^1.1.5",
"webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1"
}
}

Answer 1

I already solve it by replacing my environment
environment.loaders.prepend('style', {
test: /\.(scss|sass|css)$/,
use: [{
loader: "to-string-loader"
}, {
loader: "css-loader"
}, {
loader: "resolve-url-loader"
}, {
loader: "sass-loader"
}]
})
to this
environment.loaders.insert('sass', {
test: /\.scss$/,
use: [
"to-string-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
});
and thanks for this link