Hướng dẫn laravel không nhận css

Tôi gặp phải vấn đề tương tự khi triển khai composer require laravel/uitrong laravel phiên bản 7 nhưng tôi đã khắc phục sự cố bằng cách làm theo các bước dưới đây.

Đầu tiên :

• Tải xuống nodejs
• Cài đặt nodejs trong máy tính của bạn

Thứ hai: chạy lệnh này

composer require laravel/ui

Khi laravel/uigói đã được cài đặt, bạn có thể cài đặt giàn giáo frontend bằng lệnh ui Artisan:

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

Để tạo node_modulethư mục bên trong dự án của bạn, hãy chạy lệnh dưới đây

npm install

Khi các phần phụ thuộc đã được cài đặt bằng cách sử dụng npm install, bạn có thể biên dịch các tệp SASS của mình thành CSS thuần túy bằng cách sử dụng Laravel Mix. Lệnh npm run dev sẽ xử lý các hướng dẫn trong tệp webpack.mix.js của bạn. Thông thường, CSS đã biên dịch của bạn sẽ được đặt trong thư mục public / css:

npm run dev

một lúc nào đó, bạn có thể cần chạy lệnh này npm audit fixhoặc npm audit fix --forcesửa một số gói nếu chúng cần thiết.

Có thể một lúc nào đó bằng cách chạy lệnh này npm run devhoặc npm run watchnó sẽ hiển thị cho bạn một lỗi như bên dưới.

@ dev C:\xampp\htdocs\Auth
 npm run development 
@ development C:\xampp\htdocs\Auth
mix
        Additional dependencies must be installed. This will only take a moment.
 
        Finished. Please run Mix again.
 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`

Hãy chạy npm run watchlại nó sẽ bắt đầu Mix █████████████████████████ emitting [95%]sau khi thành công, quá trình xây dựng cũng sẽ thành công.

0 hữu ích 0 bình luận chia sẻ

Đây là chuỗi bài viết theo phong thái dễ hiểu, đơn giản, cơ bản, phù hợp với những người bắt đầu với Laravel từ con số 0.

Laravel Views

Phần này sẽ bao gồm các nội dung sau:

• Layout page
• Asset File
• Lấy dữ liệu từ database để hiển thị

Layout page

Một trang web sẽ có rất nhiều view hay có nhiều màn hình giao diện khác nhau. Nhưng nếu một số hoặc toàn bộ các màn hình đó có điểm chung hay những đoạn code HTML chung thì việc mỗi file đều có nội dung này sẽ rất dư thừa, và vi phạm nguyên tắc DRY - Don't Repeat Yourself. Để có thể khắc phục được điều này ta sẽ tách phần chung đó ra một file riêng. Trong file này sẽ gọi nội dung riêng biệt của các file views còn lại và in ra. File này thường đặt tên là layout.blade.php. Để dễ hiểu hơn hãy đi vào thực tế nhé.

File resources/views/welcome.blade.php thực tế có phần rất dài, và nội dung riêng biệt thường ở trong phần . Chúng ta sẽ copy toàn bộ trừ phần nội dung riêng biệt trong body sang file resources/views/layout.blade.php. Có thể tạo file mới bằng câu lệnh sau trên terminal touch resources/views/layout.blade.php. Trong phần nội dung thẻ chúng ta thêm dòng code @yield['content']. Nội dung file layout view sẽ như sau.

DOCTYPE html>

    
        
        

        Laravel
        ...
        
    
    
        
            @yield['content']
        
    

File welcome view ta cũng sẽ chỉnh tương ứng như sau:

#Cho ta biết file này là nội dung thêm của file `layout.blade.php`.
@extends['layout']

#Nội dung riêng biệt được đặt trong cặp @section['tên section']~@endsection
@section['content']
    
       ...

        
            
                Laravel
            

            
                Docs
                Laracasts
                News
                Blog
                Nova
                Forge
                Vapor
                GitHub
            
        
    
@endsection

Với file info view ta cũng sẽ làm tương tự.

@extends['layout']

@section['content']
    {{ $detail->body }}
    Hello
@endsection

Lúc này dòng code trong file resources/views/layout.blade.php là @yield['content'] sẽ tìm tất cả section có tên là content trong các file mà @extends['layout']. Chúng ta có thể định nghĩa nhiều section trong file và gọi ra ở file layout một cách tùy thích.

Asset File

Trong các project web sẽ luôn có các file css, js dành cho frontend. Có 2 cách để implement các file này trong laravel.

Cách 1 Cho các file css, js tương ứng vào các thư mục public/css và public/js. Sau đó có thể áp dụng vào view như sau.

Thư mục public đúng như tên gọi sẽ public những file bên trong, người dùng có thể xem thông qua F12.

Thực hành: Tại đây

Cách 2 - Khuyên dùng Cho các file sass, js tương ứng vào các thư mục resources/sass và resources/js. Sau đó require file đó vào các file:

@import './default.css';
@import './fonts.css';

require['./bootstrap'];

Toàn bộ những file sass, js này sẽ được thành một file css và js duy nhất là public/css/app.css và public/js/app.js nhờ laravel-mix. Khi đó các file sass, js này được gọi asset files.

Để cài đặt laravel-mix, bạn cần có NodeJS. Sau đó, chạy câu lệnh npm install để cài thêm các thư viện mở rộng, trong đó có laravel-mix.

{
   ...
   "devDependencies": {
       "axios": "^0.19",
       "cross-env": "^7.0",
       "laravel-mix": "^5.0.1",
       "lodash": "^4.17.19",
       "resolve-url-loader": "^3.1.0",
       "sass": "^1.15.2",
       "sass-loader": "^8.0.0",
       "vue-template-compiler": "^2.6.11"
   }
}

Mỗi khi có chỉnh sửa gì về các file js, css xong, chạy lệnh npm run dev hoặc là npm run watch để có thể render ra public/css/app.css và public/js/app.js. Sau đó có thể áp dụng vào view như sau.

Cách này được khuyên dùng bởi vì thay vì phải public rất nhiều file css, js gây tốn hiệu năng những mặt như truy vấn, tìm kiếm,... thì việc chỉ load css, js từ một file sẽ có sự tối ưu về hiệu năng.

Thực hành: Tại đây

Lấy dữ liệu từ database để hiển thị - Render Dynamic Data

Ở phần này chúng ta hãy thử tạo một bảng mới có dữ liệu để hiển thị ở about view. Tạo model Article kèm file migration như sau:

# Lệnh này sẽ đồng thời tạo ra file migration
php artisan make:model Article -m

    ...
    public function up[]
    {
        Schema::create['articles', function [Blueprint $table] {
            $table->id[];
            # Tên bài báo
            $table->string['title'];
            # Tóm tắt sơ qua bài báo
            $table->text['excerpt'];
            # Nội dung bài báo
            $table->text['body'];
            $table->timestamps[];
        }];
    }
    ...

Sau đó bạn có thể tạo 4 bản ghi tùy ý bằng cách sử dụng Tinker như sau.

php artisan tinker
$article = new App\Article
$article->title = 'Getting to know us'
$article->excerpt = 'Lorem ipsum dolor sit amet consectetur adipiscing elit'
$article->body = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis nibh et neque laoreet, ut tempor magna tristique. Donec posuere, massa a aliquet malesuada, nunc diam commodo leo, ut maximus dui sem et arcu. Ut id risus at massa lobortis rutrum at a nibh. Nulla nec vulputate orci. Cras non molestie turpis, venenatis convallis velit.'
$article->save[]

Hoặc là sử dụng laravel seed. Tham khảo tại đây.

Hãy thử test việc lấy dữ liệu ra có thành công hay không bằng cách viết trong routes/web.php như như sau.

    ...
    use App\Article;
    ...
    Route::get['/about', function [] {
        
        # Lấy tất cả bản ghi trong bảng articles. Cẩn thận đối với bảng dữ liệu lớn [không nên dùng]
        $articles = Article::all[];
        # Lấy 2 bản ghi đầu tiên trong bảng articles.
        $articles = Article::take[2]->get[];
        # Lấy tất cả bản ghi nhưng phân trang, mỗi trang 2 bản ghi. Hạn chế không lấy tất cả cùng một lúc, tăng hiệu năng.
        $articles = Article::paginate[2];
        # Lấy 3 bản ghi mới tạo gần đây nhất.
        $articles = Article::take[3]->latest[]->get[];

        # Kiểm tra trực tiếp kết quả lấy dữ liệu trên trình duyệt.
        return $articles;
    }];

Ngoài ra còn có nhiều cách truy vấn dữ liệu trong laravel, tham khảo tại đây. Sau khi làm quen với một số cách, ta lựa chọn cách phù hợp với trường hợp này.

    ...
    use App\Article;
    ...
    Route::get['/about', function [] {
        
        $articles = Article::take[3]->latest[]->get[];

        return view['about', [
            'articles' => $articles
        ]];
    }];

Sau đó, ở file about view, ta viết lại như sau để in ra dữ liệu.

    ...
    
        @foreach [$articles as $article]
        
            {{ $article->title}}
            {{ $article->excerpt }}
        
        @endforeach
    
    ...

Cú pháp laravel @foreach sẽ tương đương với mà larvavel sẽ giúp chúng ta thông dịch điều này, điều này sẽ giúp chúng ta code đơn giản hơn. {{ }} cũng là cú pháp của laravel để chúng ta nhúng đoạn code laravel trong file php.

Bây giờ chúng ta sẽ tạo ra view cho từng bài article, lần này sẽ để xử lý ở controller, cho đúng với flow của laravel, hay mô hình MVC hơn nhé.

Khai báo và sửa các file code sau:

Route::get['/articles/{article}', 'ArticlesController@show'];