Как включить S CSS в Vue компонентах? - PullRequest
Новая
       33

Как включить S CSS в Vue компонентах?

0 голосов
/ 03 августа 2020

Мне действительно нужна помощь.

Я настраиваю Webpack для Vue. js без Vue CLI, и у меня проблема, когда включены sass-loader и css -loader .

Конечный файл компилируется без проблем, но стили S CSS, указанные в компоненте через style lang = "s css", не применяются.

Что только я не пробовал .. не могу решить эту проблему.

Это мой webpack.conf: 

const path = require('path')
const webpack = require('webpack')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')

module.exports = {
     context: path.resolve(__dirname, '../src'),

     entry: {
          app: ['./index.js']
     },
     output: {
          filename: 'build.js',
          path: path.resolve(__dirname, '../dist'),

          // webpack-dev-server
          publicPath: '/'
     },

     resolve: {
          alias: {
                '@': path.resolve(__dirname, 'src'),
                'vue$': 'vue/dist/vue.esm.js'
          },
          extensions: ['*', '.js', '.vue', '.json']
     },

     devServer: {
          historyApiFallback: true,
          noInfo: true,
          overlay: true
     },

     performance: {
          hints: false
     },

     devtool: '#eval-source-map',

     module: {
          rules: [
                {
                     test: /\.vue$/,
                     loader: 'vue-loader'
                },
                {
                     test: /\.js$/,
                     loader: 'babel-loader',
                     exclude: file => (
                          /node_modules/.test(file) &&
                          !/\.vue\.js/.test(file)
                     )
                },
                {
                     test: /\.pug$/,
                     loader: 'pug-plain-loader'
                },
                {
                     test: /\.css$/,
                     use: [
                          'vue-style-loader',
                          'css-loader'
                     ],
                },
                {
                     test: /\.scss$/,
                     use: [
                          'vue-style-loader',
                          'css-loader',
                          'sass-loader'
                     ],
                },
                {
                     test: /\.(png|jpg|gif|svg|ttf|woff|woff2|eot)$/,
                     loader: 'file-loader',
                     options: {
                          name: '[name].[ext]?[hash]',
                          esModule: false
                     }
                },
          ]
     },
     plugins: [
          new VueLoaderPlugin(),

          new HTMLPlugin({
                template: './index.html',
                favicon: 'favicon.ico'
          })
     ]
}

И все зависимости в пакете. json: 

   "dependencies": {
      "vue": "^2.6.11"
   },
   "devDependencies": {
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.2",
      "babel-preset-env": "^1.6.0",
      "babel-preset-stage-3": "^6.24.1",
      "cross-env": "^7.0.2",
      "css-loader": "^4.2.0",
      "file-loader": "^6.0.0",
      "html-webpack-plugin": "^4.3.0",
      "node-sass": "^4.14.1",
      "postcss-loader": "^3.0.0",
      "pug": "^3.0.0",
      "pug-plain-loader": "^1.0.0",
      "sass-loader": "^9.0.2",
      "vue-loader": "^15.9.3",
      "vue-meta": "^2.4.0",
      "vue-template-compiler": "^2.6.11",
      "webpack": "^4.44.1",
      "webpack-cli": "^3.3.12",
      "webpack-dev-server": "^3.11.0"
   }

Это - индекс по умолчанию. html: 

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8">
</head>
<body>
     <div id="app"></div>
</body>
</html>

Это запись. js: 

import Vue from 'vue'
import App from './components/App.vue'

import VueMeta from 'vue-meta'
Vue.use(VueMeta)

new Vue({
     el: '#app',
     render: h => h(App),

     metaInfo: {
          title: 'Welcome'
     }
})

Это пример приложения. vue компонент: 

<template lang="pug">
    .welcome
        img(src='../assets/logo.png')
        h1 {{ msg }}
</template>

<script>
     export default {
          name: 'app',

          data() {
                return {
                     msg: 'Welcome to Your Vue.js App'
                }
          },

          metaInfo: {
                title: 'Welcome 2',
                titleTemplate: '%s | App Component'
          }
     }
</script>

<style lang="scss">
     .welcome {
          text-align: center;
          margin-top: 60px;

          h1 {
                font-weight: normal;
                color: darkred;
          }
     }
</style>

После этой проблемы я хочу попробовать использовать vue -router, vuex и настроить SSR.

Но пока я застрял на этом этапе.

Спасибо за внимание.

...