@thanh_tuan Ừ nhỉ, chắc trưa rồi đang đói nên quên mất tiêu câu hỏi của bạn. Đơn giản là bạn có nhiều file main khác nhau chẳng hạn một file main được dành cho Admin area, Frontend area 1, Front area 2... Nhiều modules được dùng chung giữa chúng (tách thành các partial), nhưng cũng có nhiều module lại chỉ dùng cho 1 vài file main.
Khi đó có thể đặt chung tất cả trong một folder, setup gulp để compile toàn bộ các file sass bên trong folder đấy. Bất cứ khi nào bạn thay đổi nội dung của một module thì tất cả các file được build cho các area kia đều được update lại. :v
Và khi đó, mỗi area chỉ chứa các module mà nó thực sự cần thiết. Những module giống nhau thì style giữa các module cũng được giống nhau: Fonts, colors...
@huukimit tks bạn nhiều, mà hình như bạn quên chưa trả lời cho câu hỏi của mình mà :
trường hợp nào mình cần compile cả 1 folder vậy (?) - trong khi đó mình nghĩ tất cả đều dồn chung vào file main.scss - thì ta chỉ cần biên dịch độc file này thôi
PS : Srr vì mình là thành viên mới nên không Upvote được cho mỗi câu trả lời của bạn !
@thanh_tuan Về gulp sẽ hơi dài dòng, đơn giản nhất đây là công cụ giúp bạn quản lý các file assets như js, css, sass, less, thực hiện tự động hóa một số công việc râu ria như minify assets cho production, tự động compile sass, less thành css khi nội dung file bị sass bị thay đổi.. Bạn có thể đọc thêm bài https://viblo.asia/p/tim-hieu-ve-gulpjs-naQZRw2jlvx hoặc https://viblo.asia/tags/gulp để giúp bạn hiểu thêm nha.
Thời điểm bây giờ bạn nên tìm hiểu về một tool được ưu chuộng hơn là webpack thay vì gulp. Bạn tìm hiểu về webpack tại: https://viblo.asia/tags/webpack giúp mình nha. hihi
@huukimit mình cám ơn bạn nhiều ạ. Mà cho mình hỏi thêm chút xíu nhé, thường thì mình dùng phần mềm Prepros để compile file sass thành file css, còn thằng gulp bạn nói mình cũng nghe qua nhưng chưa sử dụng, theo như bạn nói sức mạnh của nó có thể compile hẳn 1 folder chứa các file sass sang 1 folder khác chứa file css, mà mình không hiểu trường hợp nào mình cần compile cả 1 folder vậy (?) - trong khi đó mình nghĩ tất cả đều dồn chung vào file main.scss rồi thì ta chỉ cần biên dịch độc file này là đủ rồi còn gì ?
@devil_boom_129
Làm việc Teamwork cũng là 1 kĩ năng mà chúng ta cần cải thiện nhiều bạn nhỉ . Thất bại và trải nghiệm cũng sẽ giúp ta có những điều chỉnh được cách liên lạc với các member trong đội chúc bạn thành công
@thanh_tuan Sr bạn vì mình diễn đạt chưa rõ ràng. Đúng như những gì bạn nói, nhưng đó là trường hợp bạn chỉ định rõ một file cần compile thành một file CSS, thay vào đó nếu bạn dùng một tool nào khác (gulp chẳng hạn) để compile hẳn một folder chứa nhiều file sass. Khi đó những file css được tạo ra sẽ tương ứng với các file sass được đặt tên không bắt đầu bằng underscore. Những file partial lúc này sẽ không được compile thành một file CSS tương ứng nữa.
Chính vì thế nên chính xác là các file partial sẽ không được compile thành một file CSS như thường lệ.
Nếu bạn muốn import một phần của stylesheet vào main stylesheet của bạn, nhưng không muốn file đấy được compile thành một file css
Như trong hình trên mình gửi, mình tưởng khi tạo ra các thư mục base và components mục đích là để chứa các file scss con cho từng phần của trang web, sau đó đứng tại file main.scss ta dùng @import để gọi đến các file .scss con bên trong base và components để khớp nối chúng lại. Còn về compile từ scss sang css thì lúc biên dịch ta chỉ chọn file input là main.scss thì nó chỉ biên dịch file main.scss thôi chứ mắc mớ gì mà nó phải biên dịch hết cả những file râu ria con kia nữa ?
@Lynk Anh nghĩ là mình tự viết thôi, cũng nhanh mà
chẳng hạn như:
(javascript)
thousand =1000;
million = thousand *1000;
billion = million *1000;functionprintBigNumber(number){if(number / billion >=1){
c = Math.round(number / billion *10)/10;
t ='B';}elseif(number / million >=1){
c = Math.round(number / million *10)/10;
t ='M';}else{
c = Math.round(number / thousand *10)/10;
t ='K';}
console.log('$'+ c + t);}// printBigNumber(116065994688.0) => $116.1B// printBigNumber(1160659) => $1.2M// printBigNumber(11606) => 11.6K
hoặc dùng hàm mà bạn @huukimit trả lời ở phía dưới cũng hay
Terminal Costco Employee Breaks Down When He Receives Heartfelt ...
costco employee
For beloved Costco employee Arlie Smith, a diagnosis of terminal bone cancer wasn't reason ... Danville Costco employee with terminal cancer gets surprise gift
php artisan serve: để chạy app laravel (bắt buộc, vì ko có Laravel chạy thì VueJS cũng ngủm á).
còn npm run watch: nếu em chắc chắn là không sửa bất kì một thứ gì ở bên Vue thì em ko chạy vẫn cho kết quả như thế. Nhưng vì trong bài chúng ta làm bài tập và code thay đổi liên tục nên ta phải chạy. Và trong khi làm ưu tiên npm run watch hơn npm run dev vì watch theo dõi bất kì một thay đổi nào đó bên Vue nhé em, dev thì cứ thay đổi em phải chạy lại để build
THẢO LUẬN
tks bạn nhiều
@huukimit , ok ==)) mình hiểu rồi - cám ơn bạn nha
@thanh_tuan Ừ nhỉ, chắc trưa rồi đang đói nên quên mất tiêu câu hỏi của bạn. Đơn giản là bạn có nhiều file main khác nhau chẳng hạn một file main được dành cho Admin area, Frontend area 1, Front area 2... Nhiều modules được dùng chung giữa chúng (tách thành các partial), nhưng cũng có nhiều module lại chỉ dùng cho 1 vài file main.
Khi đó có thể đặt chung tất cả trong một folder, setup gulp để compile toàn bộ các file sass bên trong folder đấy. Bất cứ khi nào bạn thay đổi nội dung của một module thì tất cả các file được build cho các area kia đều được update lại. :v
Và khi đó, mỗi area chỉ chứa các module mà nó thực sự cần thiết. Những module giống nhau thì style giữa các module cũng được giống nhau: Fonts, colors...
@huukimit tks bạn nhiều, mà hình như bạn quên chưa trả lời cho câu hỏi của mình mà :
trường hợp nào mình cần compile cả 1 folder vậy (?) - trong khi đó mình nghĩ tất cả đều dồn chung vào file main.scss - thì ta chỉ cần biên dịch độc file này thôi
PS : Srr vì mình là thành viên mới nên không Upvote được cho mỗi câu trả lời của bạn !@thanh_tuan Về gulp sẽ hơi dài dòng, đơn giản nhất đây là công cụ giúp bạn quản lý các file assets như js, css, sass, less, thực hiện tự động hóa một số công việc râu ria như minify assets cho production, tự động compile sass, less thành css khi nội dung file bị sass bị thay đổi.. Bạn có thể đọc thêm bài https://viblo.asia/p/tim-hieu-ve-gulpjs-naQZRw2jlvx hoặc https://viblo.asia/tags/gulp để giúp bạn hiểu thêm nha.
Thời điểm bây giờ bạn nên tìm hiểu về một tool được ưu chuộng hơn là webpack thay vì gulp. Bạn tìm hiểu về webpack tại: https://viblo.asia/tags/webpack giúp mình nha. hihi
@huukimit mình cám ơn bạn nhiều ạ. Mà cho mình hỏi thêm chút xíu nhé, thường thì mình dùng phần mềm Prepros để compile file sass thành file css, còn thằng
gulp
bạn nói mình cũng nghe qua nhưng chưa sử dụng, theo như bạn nói sức mạnh của nó có thể compile hẳn 1 folder chứa các file sass sang 1 folder khác chứa file css, mà mình không hiểu trường hợp nào mình cần compile cả 1 folder vậy (?) - trong khi đó mình nghĩ tất cả đều dồn chung vào filemain.scss
rồi thì ta chỉ cần biên dịch độc file này là đủ rồi còn gì ?@devil_boom_129 Làm việc Teamwork cũng là 1 kĩ năng mà chúng ta cần cải thiện nhiều bạn nhỉ . Thất bại và trải nghiệm cũng sẽ giúp ta có những điều chỉnh được cách liên lạc với các member trong đội chúc bạn thành công
@thanh_tuan Sr bạn vì mình diễn đạt chưa rõ ràng. Đúng như những gì bạn nói, nhưng đó là trường hợp bạn chỉ định rõ một file cần compile thành một file CSS, thay vào đó nếu bạn dùng một tool nào khác (
gulp
chẳng hạn) để compile hẳn một folder chứa nhiều file sass. Khi đó những file css được tạo ra sẽ tương ứng với các file sass được đặt tên không bắt đầu bằng underscore. Những file partial lúc này sẽ không được compile thành một file CSS tương ứng nữa.Chính vì thế nên chính xác là các file partial sẽ không được compile thành một file CSS như thường lệ.
tks bạn
hóng phần 2 của bạn
Cám ơn bạn nhưng mình chưa hiểu rõ chỗ này :
Nếu bạn muốn import một phần của stylesheet vào main stylesheet của bạn, nhưng không muốn file đấy được compile thành một file css
Như trong hình trên mình gửi, mình tưởng khi tạo ra các thư mục
base và components
mục đích là để chứa các filescss
con cho từng phần của trang web, sau đó đứng tại filemain.scss
ta dùng @import để gọi đến các file.scss
con bên trongbase và components
để khớp nối chúng lại. Còn về compile từscss
sangcss
thì lúc biên dịch ta chỉ chọn file input làmain.scss
thì nó chỉ biên dịch filemain.scss
thôi chứ mắc mớ gì mà nó phải biên dịch hết cả những file râu ria con kia nữa ?@Lynk Anh nghĩ là mình tự viết thôi, cũng nhanh mà
chẳng hạn như:
(javascript)
hoặc dùng hàm mà bạn @huukimit trả lời ở phía dưới cũng hay
Yes đúng rồ đấy ạ, chắc do em viết nhầm, mà có cách nào không anh, chỉ em với
Ơ anh chưa hiểu lắm, sao từ
116065994688.0
lại thành$26B
được nhỉphải là
$116.1B
chứ nhỉTerminal Costco Employee Breaks Down When He Receives Heartfelt ... costco employee For beloved Costco employee Arlie Smith, a diagnosis of terminal bone cancer wasn't reason ... Danville Costco employee with terminal cancer gets surprise gift
em nên xem server của em có chạy được command line ko, nếu hỗ trợ thì ta mới có thể chạy được app laravel nhé e . nếu có thì oke thôi à
php artisan serve: để chạy app laravel (bắt buộc, vì ko có Laravel chạy thì VueJS cũng ngủm á). còn npm run watch: nếu em chắc chắn là không sửa bất kì một thứ gì ở bên Vue thì em ko chạy vẫn cho kết quả như thế. Nhưng vì trong bài chúng ta làm bài tập và code thay đổi liên tục nên ta phải chạy. Và trong khi làm ưu tiên
npm run watch
hơnnpm run dev
vì watch theo dõi bất kì một thay đổi nào đó bên Vue nhé em, dev thì cứ thay đổi em phải chạy lại để buildem cài vue devtool và nếu ứng dụng chạy production sẽ có thông báo sau nhé:
Làm sao biết ứng dụng k chạy ở chể độ production ạ
Anh ơi mỗi lần chạy để xem code trên trình duyện là phải chạy lại 2 lệnh này à anh php artisan serve npm run watch Nếu chạy 1 trong 2 lệnh có đc k anh