sass.js icon indicating copy to clipboard operation
sass.js copied to clipboard

I can't get this to work with create-react app.

Open dwjohnston opened this issue 3 years ago • 1 comments

Repro for this here.

https://github.com/dwjohnston/sassjs-cra

I'm trying to do the basic usage of this.

import logo from './logo.svg';
import './App.css';
//import Sass from "sass.js"; // memory dump
import Sass from "sass.js/dist/sass"; 
const sass = new Sass();  //SecurityError: Failed to construct 'Worker': Script at 'http://sass.worker.js/' cannot be accessed from origin 'http://localhost:3000'.

function App() {

  var scss = '$someVar: 123px; .some-selector { width: $someVar; }';
  sass.compile(scss, function(result) {
    console.log(result);
  });

  .... snip

And I get this error:

 //SecurityError: Failed to construct 'Worker': Script at 'http://sass.worker.js/' cannot be accessed from origin 'http://localhost:3000'.

Just looking at the instructions.

Ok, so maybe the basic usage doesn't work, and I'll need to do the 'set path to worker' thing.

import logo from './logo.svg';
import './App.css';
//import Sass from "sass.js"; // memory dump
import Sass from "sass.js/dist/sass"; 
Sass.setWorkerUrl('sass.js/dist/sass.worker.js')
const sass = new Sass();  

function App() {

  var scss = '$someVar: 123px; .some-selector { width: $someVar; }';
  sass.compile(scss, function(result) {
    console.log(result);
  });

  ...snip

This here doesn't crash, but it also doesn't log anything.

Is this issue basically the same as the other 'doesn't work with webpack' issues?

https://github.com/medialize/sass.js/issues/64 https://github.com/medialize/sass.js/issues/95

Has anyone got this working with CRA?

dwjohnston avatar Jan 18 '21 23:01 dwjohnston

For anyone interested, I created this API to compile SASS via an HTTP endpoint:

https://github.com/dwjohnston/sass-compiler-api

dwjohnston avatar Jan 19 '21 01:01 dwjohnston