早午餐没有为 Phoenix 1.3 项目中的 VueJS 组件编译 CSS？

Posted 2023-03-07

【中文标题】早午餐没有为 Phoenix 1.3 项目中的 VueJS 组件编译 CSS？

【英文标题】：Brunch Not Compiling CSS For VueJS Components in Phoenix 1.3 Project?

【发布时间】：2018-05-03 12:32:00

【问题描述】：

在迁移到 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 个文件

【参考方案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

【参考方案2】：

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

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

【讨论】：

priv 和 assets 现在都是 Phoenix 1.3 中的***文件夹。我尝试了您的解决方案和 components.css 的完整路径。还是不行？

你能从 assets 文件夹中运行 brunch build --debug 吗？这应该会告诉我们 brunch 将文件放在哪里。

我在问题中添加了 brunch build --debug 输出。