css在前端不起作用

drkbr07n  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(205)

我对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"
  }
}

谢谢你的帮助!

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题