早午餐不为菲尼克斯1.3项目中的VueJS组件编译CSS？

Question

在迁移到菲尼克斯1.3之后，我很难让Brunch构建VueJS组件。

我产生了一个新项目。

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

我更新了早午餐-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'
    }
  },

我在“资产/组件/My-app.vue”中添加了一个组件。

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

我试过更新布伦斯。不走运。

我错过了什么？

关于更多的上下文，完整的早午餐-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
  }
};

早午餐构建-调试输出

$早午餐构建-调试 早午餐:尝试加载早午餐的配置-config +0ms早午餐:插件加载插件:babel-早午餐+690 0ms早午餐:watch add package.json +28 0ms早午餐:watch add早午餐-config.js +0ms早午餐:watch add static/ to ic.ico +5ms早午餐:list Loaded /FRAIIC.ico +1ms早午餐:watch add static/robots.txt +0ms早午餐:list静态/robots.txt +0ms早午餐:watch add css/app.css +1ms 早午餐:列出阅读css/app.css +0ms早午餐:观察添加css/phoenix.css +1ms早午餐:列表读取css/phoenix.css +0ms 早午餐:观看添加js/app.js +0ms早午餐:列表阅读js/app.js +0ms 早午餐:观察添加js/socket.js +0ms早午餐:列表读取js/socket.js +0ms早午餐: asset资产静态/eficon.ico +3ms早午餐:列表已编译的静态/eficon.ico +4ms早午餐: asset Init资产静态/robots.txt +0ms早午餐:列表编译静态/robots.txt +0ms 早午餐:文件Init文件css/app.css +1ms早午餐:列表编译css/app.css +3ms早午餐:文件Init文件js/app.js +0ms 早午餐:管道编译js/app.js @babel早午餐+1ms早午餐:文件Init文件js/socket.js +254 js早午餐:管道编译js/socket.js @babel早午餐+0ms早午餐:文件Init文件css/phoenix.css +55 js 早午餐:清单编译css/phoenix.css +1ms早午餐:观察添加静态/图像/phoenix.png +3ms早午餐:列表读取静态/图像/phoenix.png +0ms早午餐: asset资产静态/图像/phoenix.png +8ms早午餐:列表编译的静态/图像/phoenix.png +0ms早午餐:列表读取节点模块/凤凰/priv/静态/phoenix.js +9ms早午餐:列表编译后的js/socket.js +2ms文件节点模块/凤凰/priv/静态/phoxeni.js +1ms早午餐:列出已编译的节点_模块/凤凰/priv/静态/phoenix.js+63 modules 早午餐:列表阅读node_modules/phoenix_html/priv/static/phoenix_html.js +8ms 早午餐:列表阅读../node_modules/vue/dist/vue.runtime.common.js > +0ms早午餐:列表读取组件/my-app.vue +0ms早午餐:列表编译的js/app.js +1ms早午餐:文件Init文件 +0ms 早午餐:文件Init文件组件/my-app.vue +2ms早午餐:列表../node_modules/vue/dist/vue.runtime.common.js >已编译组件/my-app.vue +0ms早午餐:文件Init文件 +1ms早午餐:列表编译node_modules/phoenix_html/priv/static/phoenix_html.js +6ms 早午餐:列出读取节点模块/进程/Browser.js+98 modules 早午餐:列表编译的../node_modules/vue/dist/vue.runtime.common.js +20 9ms早午餐:文件Init文件节点_模块/process/Browser.js +0ms早午餐:列表编译的节点_模块/process/Browser.js +9ms 早午餐:编写2/2文件+75 js早午餐:generate Concatenating ../node_modules/vue/dist/vue.runtime.common.js，node_modules/ Concatenating /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早午餐:/app.css，css/phoenix.css => ./priv/static/app.css+40 css 早午餐:生成写../priv/静态/js/app.js +4ms 早午餐:生成写../priv/静态/js/app.js.map +7ms 早午餐:生成写../priv/静态/css/app.css +1ms 早午餐:生成写../priv/静态/css/app.css.map +0ms 早午餐:写写3/3资产，删除0+62 2ms早午餐:生成写入./priv/静态/faicon.ico +0ms早午餐:generate./priv/static/robots.txt +1ms早午餐:generate./priv/Static.Image/phoenix.png +2ms 15:04:33 - info:将8个文件编译成2个文件，在2.1秒内复制3个文件

Answer 1

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

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

Answer 2

当vue和vue模板编译器包版本之间不匹配时，我就遇到了这样的问题。

因此，检查包中的vue和vue-模板编译器的实际版本-lock.json/yarn.lock，或者查看在凤凰中是否有类似于以下内容的错误：

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