Laravel trộn vue scss

}, giải quyết. { bí danh. { 'vue-router$'. 'vue-router/dist/vue-router. phổ thông. js' } } }); . js('tài nguyên/tài sản/js/ứng dụng. js', 'công khai/js'). sass('tài nguyên/nội dung/sass/ứng dụng. scss', 'công khai/css'). js('tài nguyên/tài sản/quản trị viên/quản trị viên. js', 'công khai/js'). trích xuất (['vue', 'axios', 'vue-router']). sass('tài nguyên/nội dung/quản trị viên/quản trị viên. scss', 'công khai/css'); . cấu hình. inProduction) { trộn. phiên bản();

• Phiên bản hỗn hợp của Laravel. 6. 0. 11
• Phiên bản nút (node -v). 14. 15. 4
• Phiên bản NPM (

  // webpack.mix.js
  mix.sass('resources/sass/app.scss', 'public/front/css')
     .js('resources/js/app.js', '')
     .vue()
     .alias({
       ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
       '@components': path.resolve(__dirname, 'resources/js/Components'),
       '@publicDir': path.resolve(__dirname, 'public')
     })
     .webpackConfig(config)
     .mergeManifest()
     .options({
       extractVueStyles: true,
     })
     .extract();
  

  0). 6. 14. 9
• gói web. 5. 19. 0
• webpack-cli. 4. 4. 0
• webpack-dev-máy chủ. 4. 0. 0-thử nghiệm. 0
• hệ điều hành. Fedora 33

Sự miêu tả

Chào mọi người,

Đã nâng cấp lên Laravel Mix 6 & Webpack 5 và gặp sự cố khi biên dịch. Nó đã hoàn thành thành công nhưng không bao gồm các kiểu được nhập từ bên trong thành phần Vue. Cụ thể, tôi đang sử dụng bộ điều hợp Vue Splide để hiển thị thanh trượt trên trang chính của mình và kiểu dáng bị hỏng

Tôi bao gồm các phong cách như thế này

// Slider component...

// webpack.mix.js
mix.sass('resources/sass/app.scss', 'public/front/css')
   .js('resources/js/app.js', '')
   .vue()
   .alias({
     ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
     '@components': path.resolve(__dirname, 'resources/js/Components'),
     '@publicDir': path.resolve(__dirname, 'public')
   })
   .webpackConfig(config)
   .mergeManifest()
   .options({
     extractVueStyles: true,
   })
   .extract();

tôi đã thử mà không có. tùy chọn () cũng & không bao gồm các kiểu vẫn. Nhưng nếu tôi di chuyển

// webpack.mix.js
mix.sass('resources/sass/app.scss', 'public/front/css')
   .js('resources/js/app.js', '')
   .vue()
   .alias({
     ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
     '@components': path.resolve(__dirname, 'resources/js/Components'),
     '@publicDir': path.resolve(__dirname, 'public')
   })
   .webpackConfig(config)
   .mergeManifest()
   .options({
     extractVueStyles: true,
   })
   .extract();

1 sang

// webpack.mix.js
mix.sass('resources/sass/app.scss', 'public/front/css')
   .js('resources/js/app.js', '')
   .vue()
   .alias({
     ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
     '@components': path.resolve(__dirname, 'resources/js/Components'),
     '@publicDir': path.resolve(__dirname, 'public')
   })
   .webpackConfig(config)
   .mergeManifest()
   .options({
     extractVueStyles: true,
   })
   .extract();

2 kiểu thanh trượt được bao gồm

Tôi chỉ cần các kiểu thanh trượt trong thành phần Thanh trượt nên việc di chuyển các kiểu sang

// webpack.mix.js
mix.sass('resources/sass/app.scss', 'public/front/css')
   .js('resources/js/app.js', '')
   .vue()
   .alias({
     ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
     '@components': path.resolve(__dirname, 'resources/js/Components'),
     '@publicDir': path.resolve(__dirname, 'public')
   })
   .webpackConfig(config)
   .mergeManifest()
   .options({
     extractVueStyles: true,
   })
   .extract();

2 là không hợp lý

Thứ này đã hoạt động trên Mixv5/WP4

Tui bỏ lỡ điều gì vậy?

P. S. Tôi cũng đã sửa đổi

// webpack.mix.js
mix.sass('resources/sass/app.scss', 'public/front/css')
   .js('resources/js/app.js', '')
   .vue()
   .alias({
     ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
     '@components': path.resolve(__dirname, 'resources/js/Components'),
     '@publicDir': path.resolve(__dirname, 'public')
   })
   .webpackConfig(config)
   .mergeManifest()
   .options({
     extractVueStyles: true,
   })
   .extract();

4 với

.vue({
    extractStyles: true,
})

Nhưng trong trường hợp này, ứng dụng cố tải

// webpack.mix.js
mix.sass('resources/sass/app.scss', 'public/front/css')
   .js('resources/js/app.js', '')
   .vue()
   .alias({
     ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
     '@components': path.resolve(__dirname, 'resources/js/Components'),
     '@publicDir': path.resolve(__dirname, 'public')
   })
   .webpackConfig(config)
   .mergeManifest()
   .options({
     extractVueStyles: true,
   })
   .extract();

5 với

// webpack.mix.js
mix.sass('resources/sass/app.scss', 'public/front/css')
   .js('resources/js/app.js', '')
   .vue()
   .alias({
     ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
     '@components': path.resolve(__dirname, 'resources/js/Components'),
     '@publicDir': path.resolve(__dirname, 'public')
   })
   .webpackConfig(config)
   .mergeManifest()
   .options({
     extractVueStyles: true,
   })
   .extract();

0 tương đương với

// webpack.mix.js
mix.sass('resources/sass/app.scss', 'public/front/css')
   .js('resources/js/app.js', '')
   .vue()
   .alias({
     ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
     '@components': path.resolve(__dirname, 'resources/js/Components'),
     '@publicDir': path.resolve(__dirname, 'public')
   })
   .webpackConfig(config)
   .mergeManifest()
   .options({
     extractVueStyles: true,
   })
   .extract();

1 và tôi gặp lỗi khi tải tệp chunk

Tôi thấy rằng tệp

// webpack.mix.js
mix.sass('resources/sass/app.scss', 'public/front/css')
   .js('resources/js/app.js', '')
   .vue()
   .alias({
     ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
     '@components': path.resolve(__dirname, 'resources/js/Components'),
     '@publicDir': path.resolve(__dirname, 'public')
   })
   .webpackConfig(config)
   .mergeManifest()
   .options({
     extractVueStyles: true,
   })
   .extract();

2 lớn hơn một chút trong trường hợp này, điều đó có nghĩa là các kiểu thanh trượt được bao gồm ở đó từ thành phần vue

// webpack.mix.js
mix.sass('resources/sass/app.scss', 'public/front/css')
   .js('resources/js/app.js', '')
   .vue()
   .alias({
     ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
     '@components': path.resolve(__dirname, 'resources/js/Components'),
     '@publicDir': path.resolve(__dirname, 'public')
   })
   .webpackConfig(config)
   .mergeManifest()
   .options({
     extractVueStyles: true,
   })
   .extract();

3

Nếu bạn chỉ muốn sử dụng Mô-đun CSS trong một số thành phần Vue của mình, bạn có thể đặt

const mix = require("laravel-mix");
require("laravel-mix-vue-css-modules");
 
mix.vueCssModules();

8 thành

const mix = require("laravel-mix");



require("laravel-mix-vue-css-modules");
 
mix.vueCssModules();

9