laravel - 尝试在 Vue 范围内的 css 中使用 Sass 变量
问题描述
在 laravel spa 上工作并尝试在 Vue 范围内的 css 中使用 Sass 变量,但它们没有加载。我错过了什么或者这不再可能了吗?当我使用 gobal scss 文件中的变量时,它将起作用。
root/
- resources/
- js/
- components/
- sass/
- _variables.scss
- vue.config
包.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"production": "mix --production"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.11",
"autoprefixer": "^10.2.5",
"axios": "^0.19.2",
"bootstrap": "^4.6.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.18",
"lodash": "^4.17.19",
"node-sass": "^6.0.0",
"popper.js": "^1.16.1",
"postcss": "^8.2.15",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.1.1",
"tailwindcss": "^2.1.2",
"vue": "^3.0.5",
"vue-loader": "^16.1.2",
"vue-template-compiler": "^2.6.12",
"webpack-cli": "^4.7.0"
},
"dependencies": {
"@tailwindcss/forms": "^0.3.2",
"@vue/cli": "^4.5.13",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.3.0",
"npm-watch": "^0.9.0",
"postcss-import": "^14.0.2",
"vue-i18n": "^8.24.4",
"vue-router": "^4.0.8",
"vue-unicons": "^3.2.1",
"vuex": "^4.0.0"
}
}
vue.config.js
const path = require('path');
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "./resources/sass/_variables.scss";`
}
}
}
}
组件.vue
<style lang="scss" scoped>
body{
background: $body-color;
}
</style>
解决方案(暂时)
<style lang="scss" scoped>
@import "../../sass/componentBlabla.scss";
</style>
解决方案
在你的文件webpack.mix.js 中添加这一行
mix.js('resources/js/app.js', 'public/js')
.vue().sass('resources/sass/_variables.scss', 'public/css');
在函数中仔细观察sass()
我添加了文件_variables.scss的完整路径。
然后运行这个命令npm run dev
。
希望能帮助到你。
推荐阅读
- sql - SQL Server:在选择语句中循环以获取 n 列
- c# - 调用 Complete 函数后不执行 C# TransformBlock
- sql - 如何在第一个重复字符之前提取 SQL 中的部分字符串?
- r - data.table 未按组返回正确的 splinefun
- c# - 如何杀死 ASP.NET Core 应用程序以重新启动 docker 容器
- sqlite - 如何使用模式创建一个空的 SQLite 数据库?
- php - 通过 PHP 运行 ffmpeg
- python - 在 for 循环中负递增不能提供正确的答案
- python - Python enum.Flag 带有一个被其他人使用的标志
- python - TypeVar 上的 get_type_hints