我对vue组件中的css样式有问题。那些内联css样式没有在前端应用。tailwindcss也已安装,tailwindcss类及其样式在前端正确显示
内联类(在我的例子中:' loginForm
“)在里面 <style>
未在前端应用标记。我已删除节点模块文件夹并尝试 npm install
但是没有成功。
我的vue组件看起来像
<template>
<div class="loginForm">
.....
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
loginData: {
email: "",
password: "",
remember: ""
},
};
},
}
</script>
<style scoped>
.loginForm{
background-color: #fff;
}
</style>
webpack.mix.js文件
const mix = require('laravel-mix');
// Do not Autoload Jquery as we're already including it via `plugins.js`
mix.autoload({})
var cssPath = 'resources/assets/css/';
var pluginPath = 'resources/assets/plugins/';
/***Core / Common plugin styles***/
mix.sass('resources/assets/sass/style.scss', 'public/assets/css/plugins.css')
mix.combine([
//**Required Plugins**
pluginPath + 'jquery/jquery.js',
pluginPath + 'bootstrap/bootstrap.js',
pluginPath + 'toastr/toastr.js',
],'public/assets/js/core/plugins.js')
.js([
'resources/assets/svp/app.js'
],'public/assets/js/svp.js').vue()
mix.styles([
'resources/assets/css/styles.css',
'resources/assets/svp/sass/toastr.min.scss',
'resources/assets/svp/sass/custom.scss',
], 'public/assets/css/svp.min.css')
my package.js
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --port=8000 --config=node_modules/laravel-mix/setup/webpack.config.js --host=127.0.0.1",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"build-css": "tailwindcss build -i ./resources/assets/svp/css/style.css -o resources/assets/css/styles.css"
},
"devDependencies": {
"autoprefixer": "^10.2.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-stage-2": "^6.24.1",
"postcss": "^8.2.15",
"pusher-js": "^4.2.2",
"sass": "^1.32.13",
"sass-loader": "^7.3.1",
"tailwindcss": "^2.1.1",
"vue-loader": "^15.9.7",
"vuetable-2": "^1.7.2"
},
"dependencies": {
"accounting": "^0.4.1",
"axios": "^0.21.1",
"chart.js": "^2.9.4",
"child_process": "^1.0.2",
"cross-env": "^7.0.3",
"express": "^4.16.2",
"filter-array": "^0.2.0",
"fs": "^0.0.1-security",
"glob-base": "^0.3.0",
"glob-parent": "^5.1.2",
"ioredis": "^2.5.0",
"jquery": "^3.6.0",
"laravel-echo": "^1.10.0",
"laravel-elixir-vue-2": "^0.3.0",
"laravel-mix": "^6.0.19",
"lodash": "^4.17.21",
"micromatch": "^4.0.4",
"moment-countdown": "0.0.3",
"moment-timezone": "^0.5.33",
"net": "^1.0.2",
"npm-lifecycle": "^3.1.5",
"path": "^0.12.7",
"path-browserify": "^1.0.1",
"resolve-url-loader": "^3.1.2",
"tls": "0.0.1",
"underscore": "^1.13.1",
"vee-validate": "^2.0",
"vue": "^2.6.12",
"vue-analytics": "^5.22.1",
"vue-bootstrap-typeahead": "^0.2.6",
"vue-events": "^3.1.0",
"vue-gmaps": "^0.2.2",
"vue-i18n": "^8.24.3",
"vue-quill-editor": "^2.3.3",
"vue-router": "^2.6.0",
"vue-sweetalert": "^0.1.18",
"vue-tables-2": "^2.3.0",
"vue-tailwindcss-typeahead": "^1.0.1",
"vue-tel-input": "^5.2.0",
"vue-template-compiler": "^2.6.12",
"vue-typer": "^1.2.0",
"vue2-dropzone": "^2.3.6",
"webpack": "^5.37.0",
"webpack-cli": "^4.7.0"
}
}
谢谢你的帮助!
暂无答案!
目前还没有任何答案,快来回答吧!