How to use prettier/standalone in the browser with Rails app and Webpacker


I need to format css in a wysiwyg editor in the browser. I want to use Prettier for this. The app is Rails 5.2 that uses Webpacker and Vue.

I am following the documentation here: https://prettier.io/docs/en/browser.html

I run yarn add prettier

Then, in my .js file I have:

import prettier from 'prettier';
import parserCss from 'prettier/parser-postcss';

prettier.format(".foo{color: red;}", {
  parser: "css",
  plugins: [parserCss],
});

This works in my local development environment, but when I try to deploy the application, the build fails during Webpack compile.

I think I need to configure my webpack or something. If you need more information just let me know and I will update the question.

Source: Vue – Stack Overflow

November 11, 2021
Category : News
Tags: prettier | ruby-on-rails | Vue.js | webpack | webpack-dev-server

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.