vikseriq / requirejs-vue

Use Vue components with RequireJS. Easily. Client-side.
42 stars 6 forks source link

can't optimize .vue css style with r.js #2

Open Cunwo opened 4 years ago

Cunwo commented 4 years ago

when I use
r.js -o app.build.js the page does't with css style but no optimize is ok

wuservices commented 4 years ago

Just ran into this too. I noticed that the demo says:

Note: currently Vue-component's styles will omitted during build – use standard css instead.

I'll probably go that route anyways so I can use LESS, but I was able to hack together a change to requirejs-vue.js to make it work. I ripped out some code, assuming you always want to inject. I'm sure there's a better way, but this appears to do the job.

  /**
   * Generate JavaScript to inject styles into the page
   */
  var stylesScript = function(style){
    if (!style || !style.trim().length)
      return '';

    // The optimizer will try to execute this, so skip trying to inject styles if this isn't running in the browser
    return 'if (typeof window !== "undefined" && window.document) (function(){' +
      'var e = document.createElement("style");' +
      'e.appendChild(document.createTextNode(' + JSON.stringify(style) + '));' +
      'document.body.appendChild(e);' +
      '})();'
  };

  /**
   * Rearrange .vue file to executable content
   * @param text raw file content
   * @returns {string} executable js
   */
  var parse = function(text){
    text = extractor.cleanup(text);
    var styles = stylesScript(extractor.style(text));

    return '(function(' + (module.config().templateVar || 'template') + '){'
      + styles
      + extractor.script(text)
      + '})(\''
      + extractor.template(text)
      + '\');'
  };