Brunch 未为 Phoenix 1.3 项目中的 VueJS 组件编译 CSS？

Question

我在迁移到 Phoenix 1.3 后无法让 Brunch 构建 VueJS 组件。

我生成了一个新项目。

我已经使用 NPM 安装了 vue-brunch 集成：（在这里找到：https://github.com/nblackburn/vue-brunch.git”

我已经更新了 brunch-config.js 以像这样构建 Vue 组件（我尝试了 components.css 的两条路径）：

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    vue: {
      extractCSS: true,
      out: 'priv/static/css/components.css'
      // out: '../priv/static/css/components.css'
    }
  },

我在“assets/components/my-app.vue”中添加了一个组件。

但是在构建项目后“components.css”并没有出现在“priv/static/css/”中。

我试过更新 Brunch。运气不好。

我错过了什么？

有关更多上下文，完整的早午餐-config.js 文件：

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"

      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //   "js/app.js": /^js/,
      //   "js/vendor.js": /^(?!js)/
      // }
      //
      // To change the order of concatenation of files, explicitly mention here
      // order: {
      //   before: [
      //     "vendor/js/jquery-2.1.1.js",
      //     "vendor/js/bootstrap.min.js"
      //   ]
      // }
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/assets/static". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(static)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor"],
    // Where to compile files to
    public: "../priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    vue: {
      extractCSS: true,
      out: 'priv/static/css/components.css'
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true
  }
};

brunch build --debug 输出

$ brunch build --debug

brunch:config Trying to load brunch-config +0ms brunch:plugins Loaded plugins: babel-brunch +690ms brunch:watch add package.json +28ms brunch:watch add brunch-config.js +0ms brunch:watch add static/favicon.ico +5ms brunch:list Reading static/favicon.ico +1ms brunch:watch add static/robots.txt +0ms brunch:list Reading static/robots.txt +0ms brunch:watch add css/app.css +1ms
brunch:list Reading css/app.css +0ms brunch:watch add css/phoenix.css +1ms brunch:list Reading css/phoenix.css +0ms
brunch:watch add js/app.js +0ms brunch:list Reading js/app.js +0ms
brunch:watch add js/socket.js +0ms brunch:list Reading js/socket.js +0ms brunch:asset Init asset static/favicon.ico +3ms brunch:list Compiled static/favicon.ico +4ms brunch:asset Init asset static/robots.txt +0ms brunch:list Compiled static/robots.txt +0ms
brunch:file Init file css/app.css +1ms brunch:list Compiled css/app.css +3ms brunch:file Init file js/app.js +0ms
brunch:pipeline Compiling js/app.js @ babel-brunch +1ms brunch:file Init file js/socket.js +254ms brunch:pipeline Compiling js/socket.js @ babel-brunch +0ms brunch:file Init file css/phoenix.css +55ms
brunch:list Compiled css/phoenix.css +1ms brunch:watch add static/images/phoenix.png +3ms brunch:list Reading static/images/phoenix.png +0ms brunch:asset Init asset static/images/phoenix.png +8ms brunch:list Compiled static/images/phoenix.png +0ms brunch:list Reading node_modules/phoenix/priv/static/phoenix.js +9ms brunch:list Compiled js/socket.js +2ms brunch:file Init file node_modules/phoenix/priv/static/phoenix.js +1ms brunch:list Compiled node_modules/phoenix/priv/static/phoenix.js +63ms
brunch:list Reading node_modules/phoenix_html/priv/static/phoenix_html.js +8ms
brunch:list Reading ../node_modules/vue/dist/vue.runtime.common.js > +0ms brunch:list Reading components/my-app.vue +0ms brunch:list Compiled js/app.js +1ms brunch:file Init file node_modules/phoenix_html/priv/static/phoenix_html.js +0ms
> brunch:file Init file components/my-app.vue +2ms brunch:list > Compiled components/my-app.vue +0ms brunch:file Init file ../node_modules/vue/dist/vue.runtime.common.js +1ms brunch:list Compiled node_modules/phoenix_html/priv/static/phoenix_html.js +6ms
brunch:list Reading node_modules/process/browser.js +98ms
brunch:list Compiled ../node_modules/vue/dist/vue.runtime.common.js +20ms brunch:file Init file node_modules/process/browser.js +0ms brunch:list Compiled node_modules/process/browser.js +9ms
brunch:write Writing 2/2 files +75ms brunch:generate Concatenating [../node_modules/vue/dist/vue.runtime.common.js, node_modules/phoenix/priv/static/phoenix.js, node_modules/phoenix_html/priv/static/phoenix_html.js, node_modules/process/browser.js, js/app.js, js/socket.js] => ../priv/static/js/app.js +4ms brunch:generate Concatenating [css/app.css, css/phoenix.css] => ../priv/static/css/app.css +40ms
brunch:generate Writing ../priv/static/js/app.js +4ms
brunch:generate Writing ../priv/static/js/app.js.map +7ms
brunch:generate Writing ../priv/static/css/app.css +1ms
brunch:generate Writing ../priv/static/css/app.css.map +0ms
brunch:write Writing 3/3 assets, removing 0 +62ms brunch:generate Writing ../priv/static/favicon.ico +0ms brunch:generate Writing ../priv/static/robots.txt +1ms brunch:generate Writing ../priv/static/images/phoenix.png +2ms 15:04:33 - info: compiled 8 files into 2 files, copied 3 in 2.1 sec

Answer 1

我假设您的 brunch-config.js 在 assets 文件夹中，这意味着 priv 文件夹比配置文件高一级。将 vue 配置更改为以下内容：

vue: {
  extractCSS: true,
  out: "../priv/static/css/components.css"
}

Answer 2

当 vue 和 vue-template-compiler 包版本不匹配时，我遇到了这样的问题。

因此请检查您的 package-lock.json/yarn.lock 中 vue 和 vue-template-compiler 的实际版本，或者查看您是否在 phoenix 中遇到类似于以下内容的错误：

17:04:44 - warn: Loading of vue-brunch failed due to

Vue packages version mismatch:

- vue@2.6.10
- vue-template-compiler@2.5.21

Brunch 未为 Phoenix 1.3 项目中的 VueJS 组件编译 CSS？

Brunch Not Compiling CSS For VueJS Components in Phoenix 1.3 Project?

elixir

phoenix-framework

brunch