larabel/vuejs2 프로젝트에 일반 사용자 지정 css 파일 추가

larabel/vuejs2 프로젝트에 일반 사용자 지정 css 파일 추가

저는 vuejs2와 함께 larabel5.4를 사용하여 작은 프로젝트를 구축하고 있습니다.나는 이제 막 라라벨로 vuejs2를 배우기 시작했다.라라벨 믹스를 이용해서 내 자산을 모으는거지laravel-mix 문서에서는 자신의 플레인 css 파일을 Marge하여 감시하는 방법을 찾을 수 없는 것 같습니다.

public/css/custome.css 파일에 자체 css 규칙이 있습니다.이 파일이 larabel mix에 의해 포함되고 감시되도록 webpack.webpack.http.http 파일에 무엇을 써야 합니까?현재 파일에는 다음 행이 있습니다.

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');

커스텀 CSS 파일의 이동처resources/css폴더와 아래의 설정을 기입해 주세요.webpack.mix.js

주의: 아마 이 기능은css에 접다.resources하나만 작성하면 됩니다.

mix.styles([
'resources/css/custom.css'
], 'public/css')

라라캐스트에서 해결책을 찾았는데 효과가 있었어요

다음으로 순서를 나타냅니다.

1. public/css/custome.css 내용을 리소스/자산/sass/_custome.scss에 저장합니다.

파일 확장자를 .scss로 변경하고 처음에 밑줄을 추가해야 합니다.언더스코어는 메인 app.scss 파일로 Import할 때 유용합니다.

2. 다음과 같이 리소스/자산/sass/_custome.scss 파일을 리소스/자산/sass/app.scss로 Import합니다.

   /* importing _custome.scss from the same directory containing the following files 
      resources/assets/sass/{app.scss, _custome.scss, _variables.scss} */
   
   // import _custome.scss
   @import "custome";
   
   // import _variables.scss (custom variables for bootstrap-sass)
   @import "variables";
   
   // importing bootstrap-sass from node modules (if you are using bootstrap)
   @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
   

3. webpack.mix.js 파일에 포함시킵니다.

   mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
   

4. 컴파일 대상

   npm run dev
   

그게 다예요.

언급URL : https://stackoverflow.com/questions/47855989/adding-plain-custom-css-file-in-laravel-vuejs2-project