As a developer I would like to have a SCSS/SASS example

• Type: Feature Request
• Status: Open
• Priority: Minor
• Resolution: Unresolved
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Documentation
• Labels: None

Hello I saw the ticket for the custom workflow support got solved:

https://github.com/liferay/generator-liferay-fragments/issues/19

I'm waiting for this feature for a long time and want to use it mainly for the purpose of use SCSS. I tried to make it work with like the following configuration:

let initialConfig = require('generator-liferay-fragments').getBundlerConfig()

sassLoader = {
  exclude: /node_modules/,
  test: /\.scss$/,
  use: ['sass-loader'],
}

let finalConfig = initialConfig.webpack.module.rules.push(sassLoader)
module.exports = finalConfig

Sadly I got some errors and it's a black box for me how to solve it properly that my SCSS-files get parsed into CSS files and what I need to configure that it works.

C:\DEV\source\clavisIT\clavis-public-workspace\modules\sample-liferay-fragments\node_modules\@liferay\js-toolkit-core\lib\file\FilePath.js:14
            nativePath = nativePath.replace(/\//g, '\\');
                                    ^TypeError: nativePath.replace is not a function
    at new FilePath (C:\DEV\source\clavisIT\clavis-public-workspace\modules\sample-liferay-fragments\node_modules\@liferay\js-toolkit-core\lib\file\FilePath.js:14:37)
    at Object.getFeaturesFilePath (C:\DEV\source\clavisIT\clavis-public-workspace\modules\sample-liferay-fragments\node_modules\@liferay\js-toolkit-core\lib\project\getFeaturesFilePath.js:25:32)
    at new Localization (C:\DEV\source\clavisIT\clavis-public-workspace\modules\sample-liferay-fragments\node_modules\@liferay\js-toolkit-core\lib\project\Localization.js:23:45)
    at Project.loadFrom (C:\DEV\source\clavisIT\clavis-public-workspace\modules\sample-liferay-fragments\node_modules\@liferay\js-toolkit-core\lib\project\Project.js:270:21)
    at new Project (C:\DEV\source\clavisIT\clavis-public-workspace\modules\sample-liferay-fragments\node_modules\@liferay\js-toolkit-core\lib\project\Project.js:32:14)
    at Object.<anonymous> (C:\DEV\source\clavisIT\clavis-public-workspace\modules\sample-liferay-fragments\node_modules\@liferay\js-toolkit-core\lib\bundler\PkgDesc.js:14:17)
    at Module._compile (internal/modules/cjs/loader.js:1085:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:791:14)
    at makeError (C:\DEV\source\clavisIT\clavis-public-workspace\modules\sample-liferay-fragments\node_modules\execa\lib\error.js:59:11)
    at handlePromise (C:\DEV\source\clavisIT\clavis-public-workspace\modules\sample-liferay-fragments\node_modules\execa\index.js:114:26)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Object.exports.buildProjectContent (C:\DEV\source\clavisIT\clavis-public-workspace\modules\sample-liferay-fragments\node_modules\generator-liferay-fragments\generators\utils\project-content\build-proj
ect-content.js:23:9)
    at async default_1.asking (C:\DEV\source\clavisIT\clavis-public-workspace\modules\sample-liferay-fragments\node_modules\generator-liferay-fragments\generators\import\index.js:60:41)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sample-liferay-fragments@1.0.0 import: `yo liferay-fragments:import`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sample-liferay-fragments@1.0.0 import script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

An example would be very helpful with some tests in the repository.