CODEWITHSUNDEEP
symfonywebpackwebpack-encoreopenseadragon
Damonsson
Damonsson

Reputation: 1532

Webpack Encore with UniversalViewer not building CSS

I'm trying to use https://github.com/UniversalViewer/universalviewer V4 project with my Symfony application. I'm using Webpack Encore. I used yarn add universalviewer command to install plugin, next yarn encore dev and all works correct except CSS. CSS are not build.

So next I tried to add to my app.css file line @import "/universalviewer"; but then I have lot of errors when I try to build by yarn encore dev.

Errors like

ERROR  Failed to compile with 2 errors

 error  in ./node_modules/universalviewer/dist/cjs/index.js

Syntax Error: CssSyntaxError

(1:1) /var/www/myproject/node_modules/universalviewer/dist/cjs/index.js Unknown word

How to build it properly?

My webpack.config.js

const Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')
    .enableStimulusBridge('./assets/controllers.json')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
;

module.exports = Encore.getWebpackConfig();

Upvotes: 0

Views: 137

Answers (1)

user3549043
user3549043

Reputation: 119

try

@import "~universalviewer/uw";

But I would try adding the main CSS file by adding into app.js (main JS file):

import './styles/global.scss';

then inside global.scss add import CSS which u want:

@import "~universalviewer/uw";

Upvotes: 0

Related Questions