我下载了一个免费的HTML主题。如果我在浏览器中打开主题的index.html文件,它可以完美地工作。但是,现在我需要将这个主题集成到我的Laravel应用程序中。如果我检查浏览器中加载的index.html文件中的元素,我可以看到一些.scss files正在被调用。scss folder存在于主题文件夹中,但我真的不知道如何将其包含到我的项目中
index.html
.scss files
scss folder
ha5z0ras1#
你可以认为SASS是高级的CSS,它为你提供了更多的功能,如使变量和更容易的CSS语法等...但由于浏览器不理解SASS,你必须编译SASS到CSS有多种方法来做到这一点。首先,如果你的主题文件夹已经符合SASS(CSS文件夹),你可以使用它,如果没有,并希望与Laravel集成,请按照以下步骤1.复制SASS文件夹中的所有内容,并将其放在“/resources/assets/sass”中,以便Laravel可以找到它们进行编译1.现在你必须把SASS编译成css,你可以手动使用gulp或者利用Laravel已经为你实现的Laravel mix
npm install
npm run dev //this will compile one time only npm run watch //this will automatically watch for any changes and compile
现在你的sass文件应该已经编译成css了,你可以在“public/css”文件夹中找到编译好的css文件。希望您觉得这对您有帮助,您可以在Laravel文档前端部分阅读更多信息,特别是Laravel Mix here
aiazj4mn2#
Laravel有一个名为webpack.mix.js的文件,在这个文件中,你可以通过调用mix.js/sass来编辑所有的前端资源编译,它位于项目的根目录下。1-在resources文件夹中创建一个新文件夹,并将其命名为scss,其中包含一个app.scss文件。2-转到webpack.mix.js并添加一个新行:* 混合.sass(“资源/sass/应用程序. scss”,“公共/css”);*.该方法的第一个参数是源文件,第二个参数是目标文件夹。3-在应用程序。scss文件导入所有的主题scss文件使用@import '文件/源';4-打开Laravel项目文件夹中的terminal/cmd并运行 npm run dev/watch 以编译您的scss文件,最后您的css文件结果将位于public/css/app.css中。5-将app.css导入Html head部分并重新加载页面。如果样式不起作用,请按ctrl + f5清除浏览器缓存。
jum4pzuy3#
最新版本的Laravel使用了一种名为Vite的工具来替代Laravel Mix。要将Sass与Vite一起使用,请确保安装了Vite和Sass,运行 npm install 和 npm add -D sass请确保在项目资源目录中有一个sass或scss文件夹,并且其中有一个scss文件(如app.scss确保您已经配置了vite.config.js(可以在新的Laravel项目根目录中找到),以包含sass的入口点,如下图所示,使用您创建的文件夹的正确路径和名称:
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ input: ['resources/scss/app.scss', 'resources/js/app.js'], refresh: true, }), ], });
并在您的Blade文件中添加以下内容,再次确保为您创建的文件夹使用正确的路径:
@vite(['resources/scss/app.scss', 'resources/js/app.js'])
然后,您可以通过运行 npm run build 使用Vite构建sass
3条答案
按热度按时间ha5z0ras1#
你可以认为SASS是高级的CSS,它为你提供了更多的功能,如使变量和更容易的CSS语法等...但由于浏览器不理解SASS,你必须编译SASS到CSS有多种方法来做到这一点。
首先,如果你的主题文件夹已经符合SASS(CSS文件夹),你可以使用它,如果没有,并希望与Laravel集成,请按照以下步骤
1.复制SASS文件夹中的所有内容,并将其放在“/resources/assets/sass”中,以便Laravel可以找到它们进行编译
1.现在你必须把SASS编译成css,你可以手动使用gulp或者利用Laravel已经为你实现的Laravel mix
npm install
(确保安装了npm和node)1.在运行
npm install
之后,现在您可以运行其中任何一个来编译“resources/assets/sass”中的任何sass文件现在你的sass文件应该已经编译成css了,你可以在“public/css”文件夹中找到编译好的css文件。
希望您觉得这对您有帮助,您可以在Laravel文档前端部分阅读更多信息,特别是Laravel Mix here
aiazj4mn2#
Laravel有一个名为webpack.mix.js的文件,在这个文件中,你可以通过调用mix.js/sass来编辑所有的前端资源编译,它位于项目的根目录下。
1-在resources文件夹中创建一个新文件夹,并将其命名为scss,其中包含一个app.scss文件。
2-转到webpack.mix.js并添加一个新行:* 混合.sass(“资源/sass/应用程序. scss”,“公共/css”);*.该方法的第一个参数是源文件,第二个参数是目标文件夹。
3-在应用程序。scss文件导入所有的主题scss文件使用@import '文件/源';
4-打开Laravel项目文件夹中的terminal/cmd并运行 npm run dev/watch 以编译您的scss文件,最后您的css文件结果将位于public/css/app.css中。
5-将app.css导入Html head部分并重新加载页面。如果样式不起作用,请按ctrl + f5清除浏览器缓存。
jum4pzuy3#
最新版本的Laravel使用了一种名为Vite的工具来替代Laravel Mix。
要将Sass与Vite一起使用,请确保安装了Vite和Sass,运行 npm install 和 npm add -D sass
请确保在项目资源目录中有一个sass或scss文件夹,并且其中有一个scss文件(如app.scss
确保您已经配置了vite.config.js(可以在新的Laravel项目根目录中找到),以包含sass的入口点,如下图所示,使用您创建的文件夹的正确路径和名称:
并在您的Blade文件中添加以下内容,再次确保为您创建的文件夹使用正确的路径:
然后,您可以通过运行 npm run build 使用Vite构建sass