стили в пакете/приложении css создаются от самого глубокого дочернего элемента до корневого родителя (от конца к начальному порядку)

avatar
Chkalovkaya Vp
8 августа 2021 в 18:46
24
0
1

Первая проблема заключалась в неработающем файле reset.css: когда я импортирую "gloabal.scss" в приложение или index.js, он имеет файл reset.css и другие глобальные настройки, такие как контейнеры сетки шрифтов и т. д., которые следует перезаписать. если это необходимо дочерним компонентам, но это невозможно сделать из-за каскада css. я решаю это с помощью дополнительного фрагмента для css, но я думаю, что проблема все еще не решена, потому что, если я ожидаю изменить родительские стили для детей, я не могу этого сделать простой пример структуры:

index.js:

import Vue from 'vue';
import VueRouter from "vue-router";
import router from "@router";

import { store } from '@store';

import App from '@components/App'
import '@scss/global.scss'


Vue.use(VueRouter)

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

Затем в App.vue импортируется Menu.vue с menu.css, а в меню также импортируется product.vue

конфигурация веб-пакета:

```
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = (env) => {
return {
    mode: env.production ? 'production' : 'development',
    context: path.resolve(__dirname, 'client'),
    // devtool: 'eval-source-map',

    entry: {
        app: path.resolve(__dirname, 'src/index.js')
    },
    output: {
        filename: 'js/[name].[contenthash:8].js',
        chunkFilename: 'js/[name].[contenthash:8].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        clean: true
    },

    module: {
        rules: [
            { test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader'] },
            { test: /\.vue$/, use: [{ loader: 'vue-loader', options: { hotReload: 
     env.development } 
            {
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' },
                    { loader: 'sass-resources-loader', options: {
                            resources: [
                                path.resolve(__dirname, './src/assets/scss/variables.scss'),
                                path.resolve(__dirname, './src/assets/scss/mixins.scss'),
                            ]
                        },
                    },
                ]
            }
        ]
    },

    optimization: {
        minimize: env.production,
        moduleIds: 'deterministic',
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendors: {
                    chunks: 'all',
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    enforce: true,
                    priority: 1
                },
                styles: {
                    chunks: 'all',
                    test: /[\\/]src[\\/]assets[\\/]scss[\\/]/,
                    name: 'global',
                    enforce: true,
                    priority: 0
                },
            }
        }
    },

    plugins: [
        new HTMLWebpackPlugin({
            template: path.resolve(__dirname, 'src/index.html')
        }),
        // new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].[contenthash:8].css'
        }),
        new SpriteLoaderPlugin(),
        new VueLoaderPlugin()
    ],

    devServer: { port: '3000', historyApiFallback: true, hot: true }
    }
}

package.json:

"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.2.0",
"sass": "^1.37.5",
"sass-loader": "^12.1.0",
"sass-resources-loader": "^2.2.4",
"svg-sprite-loader": "^6.0.9",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.49.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
 "reset-css": "^5.0.1",
 "vue": "^2.6.14",
 "vue-fragment": "^1.5.2",
 "vue-router": "^3.5.2",
 "vuelidate": "^0.7.6",
 "vuex": "^3.6.2"
}

результат / bundle.css: продукт, меню, приложение

.product {
  width: 300px;
}
.menu .test {
  background: red;
  padding: 100px;
}
.app {
  width: 50px;
}
```

Я ожидаю: приложение -> меню -> css продукта, что я делаю неправильно?

Источник
Ohgodwhy
8 августа 2021 в 22:16
0

import '@scss/global.scss' должен быть вверху файла. Вы импортируете его после components/App.vue, в результате чего стили включаются после стилей компонентов. Webpack не знает, как вы хотите заказать css, поэтому вы должны заказать его самостоятельно.

Chkalovkaya Vp
10 августа 2021 в 22:19
0

все в порядке с глобальным css, я все равно поместил его в один фрагмент. основная проблема с пакетом css и обратной вложенностью

Ответы (0)