vue-sfc-rollup: Can't compile .scss files.

I created Vue3 Component library.

I installed these dependencies:

• “node-sass”: “^5.0.0”,
• “sass”: “^1.32.8”,
• “sass-loader”: “^10.1.1”

I am using NPM.

Operating System: Windows_NT(10.0.19042) - win32/x64
NodeJs: 14.15.3 npm: 6.14.9 yarn: 1.22.10

I created vue.config.js at the project folder and it is working. I imported additional variables.css And it is working when I run npm run serve. Namely, styles are working without any warning.

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/lib-global/variables.scss";`
      },
    }
  }
}

But when I want to run npm run build, it is giving a warning:

(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.

and this error:

[!] (plugin vue) Error: Undefined variable.
   ╷
10 │     color: $primary;
   │            ^^^^^^^^
   ╵
  src\lib-components\bek-sample.vue 10:12  root stylesheet

full error below:

[!] (plugin vue) Error: Undefined variable.
   ╷
10 │     color: $primary;
   │            ^^^^^^^^
   ╵
  src\lib-components\bek-sample.vue 10:12  root stylesheet
src\lib-components\bek-sample.vue?vue&type=style&index=0&id=97fc0a6a&lang.css
Error: Undefined variable.
   ╷
10 │     color: $primary;
   │            ^^^^^^^^
   ╵
  src\lib-components\bek-sample.vue 10:12  root stylesheet
    at error (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:5285:30)
    at throwPluginError (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:17941:12)
    at Object.error (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:18548:24)
    at Object.error (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:18110:38)
    at V:\projects\uis\bek\node_modules\rollup-plugin-vue\dist\style.js:51:56
    at Array.forEach (<anonymous>)
    at Object.transformStyle (V:\projects\uis\bek\node_modules\rollup-plugin-vue\dist\style.js:51:23)
    at ModuleLoader.addModuleSource (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:18304:30)
    at ModuleLoader.fetchModule (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:18360:9)
    at async Promise.all (index 2)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bek@1.0.0 build: `cross-env NODE_ENV=production rollup --config build/rollup.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bek@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Otabek Sadiridinov\AppData\Roaming\npm-cache\_logs\2021-03-11T11_08_15_369Z-debug.log

And also I tried to add ```import “./lib-global/variables.scss”;`` in entry.js and entry.min.js after I tried above code. And I get below error:

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

full error below

s the next major version will default this option to `true`.
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src\lib-global\variables.scss (1:10)
1: $primary: #ff0000;
             ^
2:
3: @import "styles";
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:5285:30)
    at Module.error (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:9677:16)
    at Module.tryParse (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:10089:25)
    at Module.setSource (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:9984:24)
    at ModuleLoader.addModuleSource (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:18304:20)
    at ModuleLoader.fetchModule (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:18360:9)
    at async Promise.all (index 1)
    at ModuleLoader.fetchStaticDependencies (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:18385:34)
    at async Promise.all (index 0)
    at ModuleLoader.fetchModule (V:\projects\uis\bek\node_modules\rollup\dist\shared\rollup.js:18362:9)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bek@1.0.0 build: `cross-env NODE_ENV=production rollup --config build/rollup.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bek@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Otabek Sadiridinov\AppData\Roaming\npm-cache\_logs\2021-03-11T11_05_04_874Z-debug.log

Then, also, I tried to install vue-rollup-plugin-scss

in package.json in devDependencies:

• “rollup-plugin-scss”: “^2.6.1”,

and in build/rollup.config.js I did these edits: I added scss() at the end of all plugins: []

import scss from 'rollup-plugin-scss'

................

const baseConfig = {
....................
    plugins:[
    ......................
                 scss()
                ]
}

But this didn’t help. And giving this error:

[!] (plugin babel) SyntaxError: V:\projects\uis\bek\src\lib-components\bek-sample.vue?vue&type=style&index=0&id=97fc0a6a&lang.scss: Unexpected token (2:0)

  1 |
> 2 | .bek-sample {
    | ^
  3 |     display: block;
  4 |     width: 400px;
  5 |     margin: 25px auto;
src\lib-components\bek-sample.vue?vue&type=style&index=0&id=97fc0a6a&lang.scss (2:0)
SyntaxError: V:\projects\uis\bek\src\lib-components\bek-sample.vue?vue&type=style&index=0&id=97fc0a6a&lang.scss: Unexpected token (2:0)       

  1 |
> 2 | .bek-sample {
    | ^
  3 |     display: block;
  4 |     width: 400px;
  5 |     margin: 25px auto;
    at Parser._raise (V:\projects\uis\bek\node_modules\@babel\parser\src\parser\error.js:97:45)
    at Parser.raiseWithData (V:\projects\uis\bek\node_modules\@babel\parser\src\parser\error.js:92:17)
    at Parser.raise (V:\projects\uis\bek\node_modules\@babel\parser\src\parser\error.js:41:17)
    at Parser.unexpected (V:\projects\uis\bek\node_modules\@babel\parser\src\parser\util.js:161:16)
    at Parser.parseExprAtom (V:\projects\uis\bek\node_modules\@babel\parser\src\parser\expression.js:1208:20)
    at Parser.parseExprSubscripts (V:\projects\uis\bek\node_modules\@babel\parser\src\parser\expression.js:611:23)
    at Parser.parseUpdate (V:\projects\uis\bek\node_modules\@babel\parser\src\parser\expression.js:591:21)
    at Parser.parseMaybeUnary (V:\projects\uis\bek\node_modules\@babel\parser\src\parser\expression.js:558:23)
    at Parser.parseExprOps (V:\projects\uis\bek\node_modules\@babel\parser\src\parser\expression.js:366:23)
    at Parser.parseMaybeConditional (V:\projects\uis\bek\node_modules\@babel\parser\src\parser\expression.js:331:23)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bek@1.0.0 build: `cross-env NODE_ENV=production rollup --config build/rollup.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bek@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Otabek Sadiridinov\AppData\Roaming\npm-cache\_logs\2021-03-11T11_19_51_289Z-debug.log

Then I search for that errors and see that preprocessStyles: true was helping many people. Then I look for the vue:({}) part of my vue.rollup.config.js file. And I see that it was referenced to a baseConfig variable at above it.

vue(baseConfig.plugins.vue),

Then I see that it has a vue part in plugins section, but that was not a function because it was directly being referenced in that vue() function. I understand what’s being here. I return to the code that it was when the project is scaffolded for the first time. And write preprocessStyles: true in it and run npm run build. And it didn’t work for me.

Please help me to use SCSS in my project.