elycruz / rollup-plugin-sass Goto Github PK
View Code? Open in Web Editor NEWRollup .sass files.
License: MIT License
Rollup .sass files.
License: MIT License
instead of in devDependencies
rollup-config.js:
export default {
entry: 'src/main-aot.ts',
dest: 'aot/dist/build.js', // outputs a single application bundle
sourceMap: false,
plugins: [
sass({
// Write all styles to the bundle destination where .js is replaced by .css
output: true
/*include: ['src/style/app.scss'],*/ this triggers many erros, syntax error at '@', syntax error at $header-gray: ...
}),
nodeResolve({
jsnext: true,
main: true
}),
.....
JS and CSS bundles are generated but where I have @import statements, the sass is not compiled into css.
colors.scss(which is imported in app.scss):
/*
OCEANA color palettes and usage
*/
/*TEXT*/
$header-gray: #303030; //Card header Text Card header icon
$blue-dark-grey: #304050; //main text
generated bundle.css(with no errors):
OCEANA color palettes and usage
*/
/*TEXT*/
/*UI*/
CODE FROM COLORS.SCSS SHOULD BE HERE BUT IS MISSING
.mat-elevation-z0 {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); }
....
Are @import statements working?
If I'm missing something, pardon me.
I'm not sure if this is the right place to ask this, but I am struggling with this for quite a long time now.
The idea is simple. I have npm package and it has some sass variables and mixins. And I need to provide them with the package, so in my projects I could just:
MyBeatifulProject/styles/main.sass
:
@import '~my-lib/dist/sass/mixins` // or something like this
.custom-class
// some stuff
@mixin-from-my-lib
So, in order to make this working I have to put my mixins.sass
in the dist
somehow. And I don't have any ideas.
I am aware that this plugin just compiles .sass files to .css and put them in the dist the way I want to, but maybe somebody here can point me to the right direction.
Automate test and build tasks for the project via github actions.
Preface: I'm not entirely sure if this is an issue that should be handled by rollup-plugin-sass but I didn't know where else to ask this.
Some npm libraries use relative image url paths in their css (eg. leaflet). I cannot figure out how to get this plugin to respect those relative paths. My js and css live in
src/MyProject/
and I have rollup's destination set to
dist/MyProject/
However, the relative paths in the output css are unchanged. So if /node_modules/leaflet/dist/leaflet.css is included in MyProjectOutput.css and it has a path like "url(images/marker-icon.png)" my browser will look for an image at "/dist/images/marker-icon.png" and 404. Any suggestions as to how I might fix that?
Currently, every import overwrites the previous import. I thought that it would concatentate the imports. I'm not sure in which order they should be.
We have several dependencies which are not really required anymore (babel, pify, etc.). Removing these plugins and writing the plugins source in a more idiomatically supported way (in way already supported by node v12+) will keep the plugin a bit more lean and make the journey from code edits to tests a bit faster (we currently have to rebuild the plugins sources, on every edit, before running tests).
After upgrading from v1.2.4 to v1.2.6, Rollup complains that sass
is not a function.
The following Rollup config works with v1.2.4
const sass = require('rollup-plugin-sass')
module.exports = {
...
plugins: [
...
sass({
insert: true,
processor: css =>
postcss([autoprefixer])
.process(css, { from: undefined })
.then(result => result.css),
runtime: require('sass')
})
...
]
}
After upgrading:
[!] TypeError: sass is not a function
This is the devDependencies
section of my projects package.json
:
"devDependencies": {
"rollup": ">=2.56.3",
...
"rollup-plugin-sass": "1.2.6",
"sass": ">=1.37.5"
}
Since #54 has been merged and individual projects can choose which run time to use, it would be nice to switch the default from node-sass to sass.
Speed-wise, they seem to be about the same (according to the tests here: https://github.com/sass/dart-sass/blob/master/perf.md) and installing node-sass is always a pain.
For users who truly need node-sass, they can include it manually.
The typescript version we chose for the library is too cutting edge - type files generated by this version conflict with older, still used (1-2 years old) versions of typescript (namely typescript versions under ^3.5.3).
In order to offer more support to still relevant typescript projects we need to downgrade our typescript version far enough where we can allow older projects to install the version of typescript they need.
Projects that use rollup.config.ts files, and are using older typescript versions may not be able to use the plugin due to the generated *.d.ts type files conflicting with older typescript formats.
angular 8, 9, and 10 et al..
Lower typescript version to ^3.5.3 (version used by angular 8 (2 years old)) or comparable.
I try to use the :export construct as described in https://stackoverflow.com/questions/61517117/cannot-export-sass-variables-into-javascript?noredirect=1&lq=1 to be able to use values of SASS variables in my JavaScript but can't get it working:
@import "variables";
:export {
// Export the color palette to make it accessible to JS
some-light-blue: $some-light-blue;
battleship-grey: $battleship-grey;
// etc...
}
Should this work with rollup-plugin-sass, or is there another method to accomplish this?
just a heads up, as of rollup 1.0, this plugin throws a deprecation warning.
(!) sass plugin: The ongenerate hook used by plugin sass is deprecated. The generateBundle hook should be used instead.
Hey,
I have a working rollup + sass setup. When updating to node10 it stoped working.
Testet envs:
✅ node 9.11.1
+ rollup 0.58.2
+ rollup-plugin-sass 0.6.1
❌ node 10.0.0
+ rollup 0.58.2
+ rollup-plugin-sass 0.6.1
I am currently generating the plugin like this
const sass = require('rollup-plugin-sass');
...
const output = 'my-output${env.prodution ? '.min' : ''}.css';
const sourceMap = `${output}.map`
const outputStyle = env.production ? 'compressed' : nested';
const plugin = sass({output, options: {sourceMap, outputStyle}});
Only the css file is generated. No css.map file is generated.
Is there something wrong with my config, or does the plugin not support source maps?
I have an entry.scss file which comprises of all the scss files to be imported :- I dont import entry.scss in my rollup entry js file. So thats the reason i use the file option in the plugin.
Entry.scss
@import './fonts.scss';
@import './components/App.scss';
@import './components/Navigation.scss';
But when i provide the file option within the plugin, it doesn't work :-
Plugin config
sass({
options: {
file: 'src/app/styles/entry.scss;'
},
output: 'build/public/bundle.css'
}),
A rollup config with sass + rollup-plugin-node-resolve@5 and the option insert: true
did not work properly. See Changelog.
What I can see:
___$insertStyle
function is generated correctly in the bundle___$insertStyle
function including the styles is not generatedHere are my rollup.config.js
:
{
input: './src/foo.ts',
output: [
{ file: 'dist/foo.js', format: 'es' }
],
external: ['bar'],
plugins: [
resolve(),
typescript(),
sass({
output: false,
insert: true
})
]
}
Workaround:
Remove rollup-plugin-node-resolve
or
Use [email protected]
(latest v4)
We need to upgrade currently vulnerable dependencies in the repo - Latest npm audit
shows to vulnerabilities one critical and another moderate which should be updated.
Additionally part of the dependencies upgrade solves an issue with installing the latest version of the plugin on *nix systems (see issue #97 ).
Perform required updates:
npm audit fix
on repo.Hello,
I really miss minification in this plugin.
I know that there is a workaround
processor: isProd ? (css) => postcss({ from: undefined, plugins: [cssnano()] }) .process(css) .then((result) => result.css) : null,
but it would be better integrated :)
I used the configuration like this
sass({
output: 'dist/app.css',
options: {
outputStyle: 'compressed',
sourceMap: false,
}
}),
But the dest file is not be compressed. How can I fixed it? Thanks.
// Rollup plugins.
import babel from 'rollup-plugin-babel';
import cjs from 'rollup-plugin-commonjs';
import globals from 'rollup-plugin-node-globals';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import sass from 'rollup-plugin-sass';
import postcss from 'rollup-plugin-postcss';
export default {
dest: 'build/app.js',
entry: 'src/index.jsx',
format: 'iife',
plugins: [
resolve({
browser: false,
main: true
}),
sass({
processor(style, id) {
return postcss([ require('autoprefixer') ])
.process(/* css */)
.then((result) => {
return result.css;
});
},
output: 'styles.css'
}),
babel({
babelrc: false,
exclude: 'node_modules/**',
presets: [ 'es2015-rollup', 'stage-0', 'react' ],
plugins: [ 'external-helpers' ]
}),
cjs({
exclude: 'node_modules/process-es6/**',
include: [
'node_modules/deep-equal/**',
'node_modules/fbjs/**',
'node_modules/invariant/**',
'node_modules/history/**',
'node_modules/hoist-non-react-statics/**',
'node_modules/lodash/**',
'node_modules/object-assign/**',
'node_modules/query-string/**',
'node_modules/react/**',
'node_modules/react-dom/**',
'node_modules/react-redux/**',
'node_modules/react-router/**',
'node_modules/redux/**',
'node_modules/strict-uri-encode/**',
'node_modules/warning/**'
]
}),
globals(),
replace({ 'process.env.NODE_ENV': JSON.stringify('development') })
],
sourceMap: true
};
Error log:
Error transforming /Users/user/git/babel-react-rollup-starter/src/sass/index.scss with 'sass' plugin: postcss(...).process is not a function
TypeError: Error transforming /Users/user/git/babel-react-rollup-starter/src/sass/index.scss with 'sass' plugin: postcss(...).process is not a function
at Object.processor (/Users/user/git/babel-react-rollup-starter/config/dev.js:26:12)
at Object._callee$ (/Users/user/git/babel-react-rollup-starter/node_modules/rollup-plugin-sass/dist/rollup-plugin-sass.js:103:32)
at tryCatch (/Users/user/git/babel-react-rollup-starter/node_modules/regenerator-runtime/runtime.js:64:40)
at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/user/git/babel-react-rollup-starter/node_modules/regenerator-runtime/runtime.js:355:22)
at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/user/git/babel-react-rollup-starter/node_modules/regenerator-runtime/runtime.js:116:21)
at step (/Users/user/git/babel-react-rollup-starter/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
at /Users/user/git/babel-react-rollup-starter/node_modules/babel-runtime/helpers/asyncToGenerator.js:35:14
at new Promise (/Users/user/git/babel-react-rollup-starter/node_modules/babel-runtime/node_modules/core-js/library/modules/es6.promise.js:191:7)
at /Users/user/git/babel-react-rollup-starter/node_modules/babel-runtime/helpers/asyncToGenerator.js:14:12
at Object.transform (/Users/user/git/babel-react-rollup-starter/node_modules/rollup-plugin-sass/dist/rollup-plugin-sass.js:144:10)
Hi,
I'm currently using the plugin to generate my css from an scss file imported in the main js file as such:
import './../styles/main.scss'
Running the rollup command with the watch flag, when i save the main.scss files it recompiles fine, however if I change any of the partials, its not detected.
Is there a way for the rollup watch to extend to those partials?
I'm trying to compile *.vue files with scss style tags, but I can't get scss/sass compilation to work.
Part of my rollup config:
resolve(),
css(),
vue({ css: false }),
sass({
processor: css => postcss([autoprefixer])
.process(css)
.then(result => result.css),
options: {
implementation: require('sass'),
fiber: require('fibers'),
},
}),
The error message I get:
[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
..\..\..\node_modules\vuetify\src\styles\main.sass (3:0)
1: // Modeled after ITCSS https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
2:
3: @import './tools/_index'
^
4: @import './settings/_index'
5: @import './generic/_index'
Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
at error (...\node_modules\rollup\dist\rollup.js:5330:30)
at Module.error (...\node_modules\rollup\dist\rollup.js:9605:9)
at tryParse (...\node_modules\rollup\dist\rollup.js:9516:16)
at Module.setSource (...\node_modules\rollup\dist\rollup.js:9834:33)
at Promise.resolve.catch.then.then.then (...\node_modules\rollup\dist\rollup.js:12614:20)
Hello, I am trying to update the debian package to your latest version, but I cannot.
apt info ava
Package: ava
Version: 4.3.1+dfsg+~cs43.2.10-1
Priority: optional
Section: javascript
Source: node-ava
Maintainer: Debian Javascript Maintainers <[email protected]>
Installed-Size: 601 kB
Provides: node-arrgv (= 1.0.2), node-ava (= 4.3.1), node-ava-typescript (= 3.0.1), node-chunkd (= 2.0.1), node-ci-parallel-vars (= 1.0.1), node-code-excerpt (= 4.0.0), node-common-path-prefix (= 3.0.0), node-convert-to-spaces (= 2.0.1), node-is-error (= 2.2.2), node-p-event (= 5.0.1), node-pkg-conf (= 4.0.0), node-serialize-error (= 11.0.0), node-supertap (= 3.0.1), node-temp-dir (= 2.0.0)
Depends: node-acorn, node-ansi-styles, node-arrify, node-cbor, node-chalk (>= 5), node-chokidar, node-ci-info, node-clean-yaml-object, node-cli-truncate, node-cliui (>= 7.0.4+repack+~cs3.1.0-3~), node-concordance, node-currently-unhandled, node-debug, node-del, node-emittery, node-escape-string-regexp, node-execa, node-find-up (>= 6), node-globby, node-ignore-by-default, node-indent-string, node-inquirer, node-is-plain-object, node-is-promise, node-js-yaml, node-load-json-file (>= 7), node-matcher, node-mem, node-ms, node-p-map, node-p-timeout, node-picomatch, node-plur, node-pretty-ms, node-read-pkg, node-resolve-cwd, node-resolve-from, node-slash, node-stack-utils, node-strip-ansi, node-write-file-atomic, node-yargs, nodejs:any (>= 14)
Homepage: https://ava.li
Download-Size: 137 kB
APT-Manual-Installed: yes
APT-Sources: http://deb.debian.org/debian sid/main amd64 Packages
Description: Futuristic test runner 🚀
Even though JavaScript is single-threaded, IO in Node.js can happen in
parallel due to its async nature. AVA takes advantage of this and runs your
tests concurrently, which is especially beneficial for IO heavy tests. In
addition, test files are run in parallel as separate processes, giving you
even better performance and an isolated environment for each test file.
.
Switching from Mocha to AVA in Pageres brought the test time down from 31 to
11 seconds. Having tests run concurrently forces you to write atomic tests,
meaning tests don't depend on global state or the state of other tests, which
is a great thing!
.
Node.js is an event-based server-side JavaScript engine.
apt info ts-node
Package: ts-node
Version: 10.8.2+~cs8.8.29-1
Priority: optional
Section: javascript
Maintainer: Debian Javascript Maintainers <[email protected]>
Installed-Size: 942 kB
Provides: node-cspotcode-source-map-support (= 0.8.1), node-ts-node (= 10.8.2), node-tsconfig-node10 (= 1.0.9), node-tsconfig-node12 (= 1.0.11), node-tsconfig-node14 (= 1.0.3), node-tsconfig-node16 (= 1.0.3), node-tsconfig-node18 (= 1.0.1), node-v8-compile-cache-lib (= 3.0.1)
Depends: node-acorn, node-ampproject-remapping, node-arg, node-builtin-modules, node-create-require, node-diff, node-make-error, node-typescript, node-yn, nodejs:any
Homepage: https://github.com/TypeStrong/ts-node
Download-Size: 167 kB
APT-Manual-Installed: yes
APT-Sources: http://deb.debian.org/debian sid/main amd64 Packages
Description: TypeScript execution and language shell
Provides a command-line interface to execute TypeScript code
as a shell and an interactive read-eval-print-loop (REPL).
I have the following problems with tests :
+ ava ./test/index.test.ts ./test/style.test.ts -s
✖ Timed out while running tests
✖ Timed out while running tests
─
or
ava ./test/index.test.ts ./test/style.test.ts --serial --verbose -T 2m
✖ test/index.test.ts exited due to an error:
Error [ERR_WORKER_OUT_OF_MEMORY]: Worker terminated due to reaching memory limit: JS heap out of memory
Error [ERR_WORKER_OUT_OF_MEMORY]: Worker terminated due to reaching memory limit: JS heap out of memory
at new NodeError (node:internal/errors:372:5)
at Worker.[kOnExit] (node:internal/worker:276:26)
at Worker.<computed>.onexit (node:internal/worker:198:20)
Uncaught exception in test/style.test.ts
test/style.test.ts(1,15): error TS2724: '"ava"' has no exported member named 'before'. Did you mean 'BeforeFn'?
test/style.test.ts(17,3): error TS2322: Type 'DOMWindow' is not assignable to type 'Window & typeof globalThis'.
Type 'DOMWindow' is not assignable to type 'Window'.
Types of property 'self' are incompatible.
Type 'DOMWindow' is not assignable to type 'Window & typeof globalThis'.
Type 'DOMWindow' is missing the following properties from type 'typeof globalThis': AnalyserNode, Animation, AnimationEffect, AnimationEvent, and 500 more.
✖ test/style.test.ts exited with a non-zero exit code: 1
─
1 uncaught exception
Thank you in advance.
Any hint on how to write hash in final file name?
When rollup is run with
output: { fomat: 'esm',
...
plugins: [rollupPluginSass({insert:true}), ...
multiple chunks (which don't import any css) have the insert css
function ___$insertStyle
needlessly placed at the top of each chunked file.
ideally this function to insert a style element into the header would be added earlier in the rollup build pipeline so that it could be chunked to a single, appropriate file.
After having created this issue I saw there have been no commits to this repository for 13 months (at the time of writing). if anyone is a bit stuck on this issue, I moved to rollup-plugin-postcss which works as expected (only placing the insert css
function once in the bundle of outputs).
I am constantly receiving this error after upgrade the plugin version to 1.2.5. Downgrading to 1.2.4 works fine..
[!] TypeError: The "path" argument must be of type string. Received an instance of RegExp
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of RegExp
at validateString (internal/validators.js:124:11)
at Object.resolve (path.js:1074:7)
at /tmp/pwt_test_1711/node_modules/rollup-plugin-sass/node_modules/rollup-pluginutils/dist/pluginutils.cjs.js:183:68
at Array.map (<anonymous>)
at Object.createFilter (/tmp/pwt_test_1711/node_modules/rollup-plugin-sass/node_modules/rollup-pluginutils/dist/pluginutils.cjs.js:183:35)
at Object.plugin [as default] (/tmp/pwt_test_1711/node_modules/rollup-plugin-sass/src/index.ts:134:14)
Running npm run build
after cloning from GitHub:
$ npm run build
> node build/build.js
node_modules/nan
resolve failed: { Error: Cannot find module 'babel-runtime'
babel-runtime is installed in node_modules.
On:
https://github.com/differui/rollup-plugin-sass/blob/master/src/index.js
You import writeFile from fs but then on line 35 you attempt to use fs.writeFile, which ends up with fs is undefined if you pass in the output option.
The fix is easy, change fs.writeFile
to writeFile
I try to use the :export construct as described in https://stackoverflow.com/questions/61517117/cannot-export-sass-variables-into-javascript?noredirect=1&lq=1 to be able to use values of SASS variables in my JavaScript but can't get it working:
@import "variables";
:export {
// Export the color palette to make it accessible to JS
some-light-blue: $some-light-blue;
battleship-grey: $battleship-grey;
// etc...
}
Should this work with rollup-plugin-sass, or is there another method to accomplish this?
Hi,
I'm having a weird issue: I'm using an @import
for a package, with ~
, and resolve
sometimes fails to resolve the path and hangs the whole Rollup process.
I've been debugging it and the issue is in this call, that for some reason, sometimes doesn't invoke the callback.
At this point you may be wondering why I'm creating an issue here and not on the resolve
repository? Well, even if the issue is with resolve
, I thought that I can easily bypass that by adding a custom importer... but custom importers are added after the one on the plugin, so if resolve
"doesn't resolve" the path, they are never called.
Finally, the questions:
resolve
instead of require.resolve
?If you consider 1 or 2 above 3, I can make a PR.
Regards
My JS File:
My SCSS file which is imported from the JS file:
as you can see, @import url(../../../node_modules/react-select/dist/react-select.css);
does not get imported in the bundled es.
My rollup config:
const resolve = require('rollup-plugin-node-resolve')
const babel = require('rollup-plugin-babel')
const replace = require('rollup-plugin-replace')
const sass = require('rollup-plugin-sass')
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
const path = require('path')
const fs = require('fs')
const project = require('../project.config')
const babelOptions = JSON.parse(fs.readFileSync('.babelrc'))
const inProject = path.resolve.bind(path, project.basePath)
const inProjectSrc = (file) => inProject(project.srcDir, file)
const fPath = path.resolve(process.cwd(), project.libDir)
export default {
input: `${inProjectSrc(project.aletheia)}.js`,
output: {
file: `${fPath}/${project.aletheia}.es.js`,
format: 'es',
},
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
sass({
insert: true,
include: [ '**/*.css', '**/*.scss' ],
options: {
includePaths: [
'node_modules',
],
},
processor: css => postcss([autoprefixer])
.process(css)
.then(result => result.css),
}),
babel({
...babelOptions,
plugins: [
'inline-json-import', // @TODO add this to the webpack build
'external-helpers', // @TODO add this to the webpack build
'babel-plugin-transform-decorators-legacy',
'babel-plugin-transform-class-properties',
'babel-plugin-transform-es2015-function-name',
'babel-plugin-transform-react-stateless-component-name',
'babel-plugin-transform-object-rest-spread',
'inline-react-svg',
['minify-replace', { // @TODO add this to the webpack build
'replacements': [{
identifierName: '__DEV__',
replacement: {
type: 'numericLiteral',
value: 0,
},
}, {
identifierName: '__LOCAL__',
replacement: {
type: 'numericLiteral',
value: 0,
},
}, {
identifierName: '__PROD__',
replacement: {
type: 'numericLiteral',
value: 1,
},
}, {
identifierName: '__TEST__',
replacement: {
type: 'numericLiteral',
value: 0,
},
}],
}],
],
babelrc: false,
exclude: [
'node_modules/**',
],
runtimeHelpers: true,
}),
resolve({
jsnext: true,
module: true,
only: [/^\.{0,2}\/|\.scss$|\.css$/i], // threat all node_modules as external
}),
],
}
I am trying to inject the style to the head tag, the function ___$insertStyle
is generated in the main bundle js file but no one is calling the function.
scss({
output: 'build/bundle.css',
insert: true,
options: {
outputStyle: 'compressed'
},
processor(code) {
return postcss([require('autoprefixer')])
.process(code)
.then((result) => {
return result.css;
});
}
}),
Why is the sass version locked to 1.7.2?
I think it would be beneficial to use never versions. Correct me if I am missing something.
I need the importing of CSS same as @LucaMele in #50
According to the docu of SASS-LANG the sass lib supports this since 1.11.0:
https://sass-lang.com/documentation/at-rules/import#importing-css
Compatible with rollup-plugin-css-only
String|Function|Boolean
(default: true)If you specify a string, it will be the path to write the generated CSS.
If you specify a function, call it passing the generated CSS as an argument.
If you specify true, the stylesheet is placed next to the bundle: e.g. bundle.js => bundle.css
If you specify false, it will export the stylesheet as a string.
all @warn
statements are still visible in the output.
It seems that output: true
is broken. While it used to "write all styles to the bundle destination where .js is replaced by .css", it now writes them to the input destination (which is usually not what is wanted).
For example:
import resolve from 'rollup-plugin-node-resolve';
import sass from 'rollup-plugin-sass';
export default {
input: 'src/index.js',
output: {
name: 'Project',
sourcemap: true,
file: './project.js',
format: 'umd'
},
plugins: [
resolve(),
sass({
output: true
})
]
};
Produces src/index.css
.
import sass from 'rollup-plugin-sass';
plugins: [
sass({
options: {
// data: '$Text: #666;$Primary: #1badff;',
file: 'src/theme.scss',
},
insert: true,
}),
],
我按照文档这样添加全局scss或者全局变量,并不能生效
Hi,
I was trying to build a plugin that would extract images and web fonts from the generated CSS and copy them to the distribution directory.
The idea was to use sourceMapEmbed
, then after this plugin generated the CSS, I would go get the map, list the original sources and search for url(...)
s on the code, copy them and replace the path on the CSS.
The problem I found is that, because this plugin uses renderSync
with the data
option, the source map sources
is stdin
.
Playing around with the plugin code I saw that the only reason for using data
is when you receive the prependSass
option, and I was thinking that maybe you could use data
only when prependSass
has some value, and in case is empty, use file
.
The change would be something like this:
- const sassConfig = Object.assign({ data: `${prependSass}${code}` }, options.options);
+ const baseConfig = prependSass
+ ? { data: `${prependSass}${code}` }
+ : { file: id };
+ const sassConfig = Object.assign(baseConfig, options.options);
The rest would work the same.
Would you consider it if I send a PR?
Regards
npmjs.com has version 1.2.2 but last version tagged in the repo is 1.1.0. Please push a tag for the latest version.
I've got a simple SASS file theme.scss
:
@import 'sth.scss';
And Rollup config:
const path = require( 'path' );
const nodeResolve = require( 'rollup-plugin-node-resolve' );
const sassRollupPlugin = require( 'rollup-plugin-sass' );
export default {
entry: './entry-point.js',
format: 'iife',
dest: path.join( 'build', 'dist', 'ckeditor.js' ),
plugins: [
nodeResolve(),
sassRollupPlugin( {
insert: true
} )
]
};
And I get this:
Error parsing /www/ckeditor5/ckeditor5/node_modules/ckeditor5-editor-classic/theme/theme.scss: Unexpected character '@' (1:0) in /www/ckeditor5/ckeditor5/node_modules/ckeditor5-editor-classic/theme/theme.scss
I thought that SCSS imports would be handled by node-sass itself, so this error is surprising. But then, I don't see any tests for your package which would check imports. So is it a missing feature of this plugin or should I use it with some other package like https://www.npmjs.com/package/node-sass-import?
hola!
how are you?
how can i use a custom scss importer (like with webpack or simpla node-sass)?
In my build process I need to add variables to sass for environment information. I did this before by
options.data = '$sprite: \'' + host + '/sprite.png\'; \n' + sassFile
Thus I'd like to be able to pass in {data: variables} and this plugin would do {data: options.data + code} to pass it to node-sass
There seems to be a race condition in test/index.test.ts, where a particular test fails on fresh installs and sometimes on github CI/CD actions - Subsequent runs of the test causes the test to pass which points to either a race condition or caching issue though requires further investigation:
Test result, from github CI/CD run:
https://github.com/differui/rollup-plugin-sass/runs/3738609952?check_suite_focus=true#logs)
...
index.ts › should support output as function
test/index.test.ts:170
169: .then(rslt => t.true(squash(rslt.toString()) === ''))
170: .then(() => t.true(
171: outputSpy.calledWith(expectedSpyArg),
`outputSpy` should've been called with `body{color:red}body{color:green}`. Spy called with `body{color:green}body{color:red}`, other args [[{"id":"/home/runner/work/rollup-plugin-sass/rollup-plugin-sass/test/assets/actual_b.scss","content":"body{color:green}"},{"id":"/home/runner/work/rollup-plugin-sass/rollup-plugin-sass/test/assets/actual_a.scss","content":"body{color:red}"}]]
Value is not `true`:
false
› test/index.test.ts:170:23
I was getting an error when configuring the plugin like:
let scssOpt = {
output: "build/mystyles/bundle.css"
}
Which was cause by the filepath build/mystyes
not existing. IMHO this would be a handy feature, since many times we want JS and CSS to live in separate folders ( other than the root path of rollup.config.js
).
To achieve this I did the following:
fs-extra
package; in principle it could be a replacement for fs
altogether, but I finall left the original fs.writeFileSync
call.output-path
test slightly, to cover this case.I hope this can be useful!
(!) Cannot call a namespace ('sass')
rollup.config.ts (23:8)
21: nodeResolve({ browser: true }),
22: commonjs(),
23: sass({
^
24: processor: css => postcss([autoprefixer])
25: .process(css)
loaded rollup.config.ts with warnings
[!] TypeError: sass__namespace is not a function
No error in IDE. But can't compile.
Can be fixed with "allowSyntheticDefaultImports": true
in tsconfig.json
compilerOptions
According to discussion here rollup/rollup-plugin-commonjs#157 (comment). It seems that can't be fixed. Please add to document
可以使用 "allowSyntheticDefaultImports": true
in tsconfig.json
compilerOptions
修复
根据 rollup/rollup-plugin-commonjs#157 (comment) 的讨论,看起来无法修复,需要加到文档里
Using option output: 'bundle.css'
The current implementation causes the error below, because the SASS is parsed as javascript.
Error parsing App.vue.component.css: Unexpected character '@' (2:0) in App.vue.component.css
Changing this line to return an empty string (and putting the writefile above it), gets it working.
https://github.com/differui/rollup-plugin-sass/blob/7dee47cde6d23ecbc649fea8c4fb6f36bc9aed62/dist/rollup-plugin-sass.cjs.js#L84
I'm having trouble getting sass() to actually do anything, and I can't find any tutorials or examples anywhere to help...
export default {
entry: 'app/main_jit.ts',
dest: '../../../bin/web/billing/bundle.js',
sourceMap: false,
format: 'iife',
plugins: [
angular(),
typescript({
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"strictNullChecks": false,
"suppressImplicitAnyIndexErrors": true
}),
nodeResolve({module: true}),
commonjs({
include: 'node_modules/rxjs/**'
}),
sass({
output: '../../../bin/web/billing/index.css',
options: {
file: 'app/index.scss'
}
})
]
}
As you can see, I'm trying to take in an scss file 'app/index.scss' and then produce a css file '../../../bin/web/billing/index.css'... however no file is ever generated.
I've tried many combinations of paths for both input and output, and I've never seen any output files at all, anywhere. What am I doing wrong?
(note: it works fine with node-sass, using the same file paths)
Also, why is there an "output" param, if there is already an outFile in the sass options?
Thanks
https://github.com/differui/rollup-plugin-sass/blob/e94b639f895563b9f78bb53c21695ce02fe0a56a/src/index.js#L69-L73
this logic prevents any custom importer from running, a better way is to return null in case customizedSassOptions.importer
is defined to allow it/them to run.
To reproduce just try to import with any custom path format that will not correctly resolve for example a path with a variable like:
@import '~test/${theme}/utils';
it will fail and notice that even after adding
options: {
importer: [
function(url, prev, done) {
console.log('this will never run...');
}
],
// ...
}
The custom importer doesn't run (while it does after returning null
).
Just from importing the plugin in my rollup.config.js, even when I'm not calling sass(), I get this error:
Cannot find module 'babel-runtime/regenerator'
Error: Cannot find module 'babel-runtime/regenerator'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (C:\web\node_modules\rollup-plugin-sass\dist\rollup-plugin-sass.cjs.js:5:43)
at Module._compile (module.js:409:26)
at Module._extensions..js (module.js:416:10)
at Object.require.extensions..js (C:\web\node_modules\rollup\bin\rollup:763:6)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
If you use Dart Sass, do you select this library?
I was using postCss, but it does not seem to support Dart Sass.
Thank you for your answer.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.