피닉스 1.3 프로젝트의 VueJS 구성 요소에 대한 브런치 CSS 컴파일 안 함?

Question

Phoenix 1.3으로 이동 한 후 Brunch에 VueJS 구성 요소를 작성하는 데 문제가 있습니다.

새로운 프로젝트를 생성했습니다.

내가 NPM 사용 VUE-브런치 통합 설치 한 : 여기 가 (: https://github.com/nblackburn/vue-brunch.git "나는과 같이 뷰 구성 요소를 구축하기 위해 브런치-config.js 업데이트되었습니다

(나는 구성 요소에 대한 두 경로를 시도합니다. 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' 
    } 
    }, 

나는 구성 요소에 "자산/구성 요소/내-app.vue"을 추가 한

그러나에 표시되지 않는 프로젝트 "components.css"를 구축 한 후, ". priv/static/css/".

브런치 업데이트를 시도했습니다. 불운.

무엇을 놓쳤습니까? 더 컨텍스트를 들어

, 전체 브런치-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 
    } 
}; 

브런치 빌드 --debug 출력

$ 브런치 빌드 --debug

브런치 : config brunch-config + 0ms 브런치를로드하려고 시도 함 : 플러그인 로드 된 플러그인 : 바벨 브런치 + 690ms 브런치 : watch add package.json + 28ms 브런치 : watch add add brunch-config.js + 0ms 브런치 : static/favicon.ico + 5ms 브런치보기 : static/favicon.ico + 1ms 읽기 브런치 : watch add static/robots.txt + 0ms 브런치 : 목록 읽기 정적 /robots.txt + 브런치 0ms 브로드 캐스팅 : watch add add css/app.css + 1ms
브런치 : list css/app.css + 0ms 브런치 읽기 : 시계 추가 css/phoenix.css + 1ms 브런치 : list css/phoenix 읽기. CSS + 에선 0ms
브런치 : JS를 추가 시청/app.js + 에선 0ms 브런치 : 목록 읽기 JS/app.js + 에선 0ms
브런치 : JS를 추가 시청/socket.js + 에선 0ms 브런치 : 목록 읽기 JS/socket.js + 0ms 브런치 : asset 초기화 자산 static/favicon.ico + 3ms 브런치 : list 컴파일 된 정적/favicon.ico + 4ms 브런치 : asset 초기화 자산 정적/robots.txt + 0ms 브런치 : 목록 컴파일 된 stati cs/app.css + 3ms brunch : 파일 초기화 파일 js/app.js + 0ms
brunch : 파이프 라인 js/app.js @ babel-brunch + 1ms 브런치 컴파일 : 초기화 파일 js/socket.js + 254ms 브런치 : 파이프 라인 js/socket.js 컴파일 @ babel-brunch + 0ms 브런치 : 파일 초기화 파일 css/phoenix. css + 55ms
브런치 : list 컴파일 된 CSS/phoenix.css + 1ms 브런치 : watch add static/images/phoenix.png + 3ms 브런치 : 목록 읽기 정적/이미지/phoenix.png + 0ms 브런치 : 자산 초기화 자산 static/images/phoenix.png + 8ms 브런치 : list 컴파일 된 static/images/phoenix.png + 0ms 브런치 : list 읽기 node_modules/phoenix/priv/static/phoenix.js + 9ms 브런치 : 목록 컴파일 된 js/socket.js + 2ms 브런치 : 파일 초기화 파일 node_modules/phoenix/priv/static/phoenix.JS + 1ms의 브런치 : 목록 컴파일 node_modules/피닉스/PRIV/정적/phoenix.js + 63ms
브런치 : node_modules/phoenix_html/PRIV/정적/phoenix_html.js가 + 8ms의
브런치 독서 목록 : 목록 읽기 ../ node_modules/vue/dist/vue.runtime.common.js > + 0ms brunch : list 구성 요소 읽기/my-app.vue + 0ms 브런치 : list 컴파일 된 js/app.js + 1ms 브런치 : 파일 Init 파일 node_modules /phoenix_html/priv/static/phoenix_html.js + 에선 0ms
> 브런치 : 파일 초기화 파일 구성 요소/내 - app.vue + 2ms의 브런치 : 목록 > 컴파일 된 구성 요소/내 - app.vue + 에선 0ms 브런치 : 초기화가 + 1ms의 브런치 ../node_modules/vue/dist/vue.runtime.common.js 파일 파일 : 목록 컴파일 node_modules/phoenix_html/PRIV/정적/phoenix_html.js가 + 6ms가
브런치 : 목록 읽기 node_modules/과정 /browser.js + 98ms
브런치 : list 컴파일 됨 ../node_modules/vue/dist/vue.runtime.common.js + 20ms 브런치 : 파일 초기화 파일 node_modules/process/browser.js + 0ms 브런치 : list 컴파일 된 node_modules /process/browser.js + 9ms
브런치 : 쓰기 2/2 파일 + 75ms 브런치 작성 : [../node_modules/vue/dist/vue.runtime.common.js, node_modules/phoenix/priv/static/phoenix.js, node_modules/phoenix_html/priv/static/pho jms/app.js, js/socket.js] => ../priv/static/js/app.js + 4ms 브런치 : 연속 생성 [css/app.js, js/socket.js] =>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
브런치 : generate Writing ../priv/static /css/app.css.map + 0ms
브런치 : 쓰기 0/62ms 브런치 제거 : 3/3 자산 쓰기 : 쓰기 ../priv/static/favicon.ico + 0ms 브런치 : 생성쓰기../priv/static/robots.txt + 1ms 브런치 : 생성하기 ../priv/static/images/phoenix.png + 2ms 15:04:33 - info : 컴파일 된 파일 2 파일로 파일 복사 3 2.1 초

Answer 1

나는 당신의 brunch-config.js가 assets 폴더에 있으리라 믿고있어,이는 priv 폴더 설정 파일보다 한 단계 위에있는 것을 의미합니다. vue 구성을 다음과 같이 변경하십시오.

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