早午餐没有为 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 尝试加载 brunch-config +0ms brunch:plugins 加载的插件：babel-brunch +690ms brunch:watch add package.json +28ms 早午餐：观看添加 brunch-config.js +0ms 早午餐：观看添加静态/favicon.ico +5ms 早午餐：列表阅读静态/favicon.ico +1ms 早午餐：观看添加静态/robots.txt +0ms 早午餐：列表阅读 静态/robots.txt +0ms 早午餐：观看添加 css/app.css +1ms
早午餐：列表阅读 css/app.css +0ms 早午餐：观看添加 css/phoenix.css +1ms 早午餐：列表阅读 css/phoenix.css +0ms
brunch:watch 添加 js/app.js +0ms brunch:list 阅读 js/app.js +0ms
brunch:watch add js/socket.js +0ms brunch:list 读取 js/socket.js +0ms brunch:asset 初始化资产 static/favicon.ico +3ms brunch:list 编译后的静态/favicon.ico +4ms brunch:asset 初始化资产 静态/robots.txt +0ms 早午餐：列表编译静态/robots.txt +0ms
brunch:file 初始化文件 css/app.css +1ms brunch:list 已编译 css/app.css +3ms brunch:file 初始化文件 js/app.js +0ms
brunch:pipeline 编译 js/app.js @ babel-brunch +1ms brunch:file 初始化文件 js/socket.js +254ms brunch:pipeline 编译 js/socket.js @ babel-brunch +0ms brunch:file 初始化文件 css/phoenix.css +55ms
早午餐：列出已编译的 css/phoenix.css +1ms 早午餐：观看添加 static/images/phoenix.png +3ms brunch:list Reading static/images/phoenix.png +0ms brunch:asset 初始化资产 static/images/phoenix.png +8ms brunch:list 已编译 static/images/phoenix.png +0ms brunch:list 阅读 node_modules/phoenix/priv/static/phoenix.js +9ms 早午餐：列表 编译后的 js/socket.js +2ms brunch:file 初始化文件 node_modules/phoenix/priv/static/phoenix.js +1ms 早午餐：列表 编译 node_modules/phoenix/priv/static/phoenix.js +63ms
早午餐：列表阅读 node_modules/phoenix_html/priv/static/phoenix_html.js +8ms
早午餐：列表阅读 ../node_modules/vue/dist/vue.runtime.common.js > +0ms brunch:list 读取 components/my-app.vue +0ms brunch:list 编译好的 js/app.js +1ms brunch:file 初始化文件 node_modules/phoenix_html/priv/static/phoenix_html.js +0ms
> brunch:file 初始化文件 components/my-app.vue +2ms brunch:list > 编译组件/my-app.vue +0ms brunch:file 初始化文件 ../node_modules/vue/dist/vue.runtime.common.js +1ms 早午餐：列表 编译 node_modules/phoenix_html/priv/static/phoenix_html.js +6ms
brunch:list 读取 node_modules/process/browser.js +98ms
早午餐：列表编译../node_modules/vue/dist/vue.runtime.common.js +20ms brunch:file 初始化文件 node_modules/process/browser.js +0ms brunch:list 编译好的 node_modules/process/browser.js +9ms
早午餐：写入写入 2/2 个文件 +75 毫秒 早午餐：生成连接 [../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 早午餐：生成连接 [css/app.css, css/phoenix.css] => ../priv/static/css/app.css +40ms
早午餐：生成写作 ../priv/static/js/app.js +4ms
早午餐：生成写作 ../priv/static/js/app.js.map +7ms
早午餐：生成写作 ../priv/static/css/app.css +1ms
早午餐：生成写作 ../priv/static/css/app.css.map +0ms
brunch:write 编写 3/3 资产，删除 0 +62ms brunch:generate 写作../priv/static/favicon.ico +0ms brunch:generate 写作 ../priv/static/robots.txt +1ms brunch:generate 写作 ../priv/static/images/phoenix.png +2ms 15:04:33 - 信息：编译 8 文件分成 2 个文件，在 2.1 秒内复制了 3 个文件

Answer 1

当 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

Answer 2

我假设您的brunch-config.js 位于assets 文件夹中，这意味着priv 文件夹比配置文件高一级。把vue配置改成如下：

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