search

Anidetrix / rollup-plugin-styles

🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
https://anidetrix.github.io/rollup-plugin-styles
MIT License
242 stars 43 forks source link

import 'x.scss' → Unexpected character '@' #141

Open dilyanpalauzov opened 3 years ago

dilyanpalauzov commented 3 years ago

I copy bootstrap.scss from node_modules/bootstrap/scss to ./, replace in it each @import "x" with @import "~/bootstrap/scss/x" and then in my .js file I write import './bootstrap.scss'. I have npm-installed sass.

Calling rollup prints:

(node:29622) UnhandledPromiseRejectionWarning: Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
    at error (file:///git/bapha/node_modules/rollup/dist/es/shared/rollup.js:5150:30)
    at Module.error (file:///git/bapha/node_modules/rollup/dist/es/shared/rollup.js:9631:16)
    at tryParse (file:///git/bapha/node_modules/rollup/dist/es/shared/rollup.js:9545:23)
    at Module.setSource (file:///git/bapha/node_modules/rollup/dist/es/shared/rollup.js:9942:30)
    at ModuleLoader.addModuleSource (file:///git/bapha/node_modules/rollup/dist/es/shared/rollup.js:18074:20)
    at async ModuleLoader.fetchModule (file:///git/bapha/node_modules/rollup/dist/es/shared/rollup.js:18128:9)
    at async Promise.all (index 33)
    at async ModuleLoader.fetchStaticDependencies (file:///git/bapha/node_modules/rollup/dist/es/shared/rollup.js:18152:34)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (file:///git/bapha/node_modules/rollup/dist/es/shared/rollup.js:18129:9)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:29622) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:29622) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

So apparently the line @import "~bootstrap/scss/functions"; is not passed to sass, but is handled by rollup as JavaScript.

My understanding is, that rollup-plugin-styles can be feeded with .scss files and these are converted on the fly to .css.