Currently utilizing WebPack, I am now faced with the task of compiling SASS files in conjunction with Bootstrap. To begin this process, I installed node-sass and sass-loader, though uncertain if either are necessary. Subsequently, within my server.js file, a line was added as follows (with no further references to the Sass object at this point).
import Sass from "node-sass";
The compilation revealed errors indicating that the fs package was missing. In response to a solution provided in this answer, I attempted the following adjustments (both independently and concurrently). While the error pertaining to fs was resolved, a new issue arose regarding an unexpected token within the package.json of the node-sass module.
node: { fs: "empty" },
target: "node",
...
The implications of these changes are not fully understood, nor their impact. Both alterations seem to yield the same error message, adding to my confusion. Any insights into this matter would be greatly appreciated, given their disparate nature.
Subsequently, I proceeded to activate the loader within my webpack.config.js by incorporating additional suggestions provided here. Further attempts were made to map the source as described in another reference found here. Alternatively, an alternate approach recommended a different syntax for specifying the target... Yet none of these efforts proved fruitful, leading to mounting confusion and eventual frustration.
module: {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
{ test: /\.scss$/, loader: 'style!css!sass' }
]
},
sassLoader: { sourceMap: true },
...
Many of the resources I've consulted appear outdated, potentially doing more harm than good. Furthermore, numerous unanswered queries exist concerning the integration between WebPack and SASS (e.g. this and this). It seems I may be veering off course...
I am seeking guidance to ensure I am on the correct path.