یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دوره‌ها

استفاده از تخفیف‌ها
ثانیه
دقیقه
ساعت
روز
سهیل ساقیان
7 سال پیش توسط سهیل ساقیان مطرح شد
2 پاسخ

عدم تبدیل Scss به CSS

سلام
من طبق آموزش دوره Webpack و منابع زیر فایل Webpack را کانفیگ کردم، ولی فایل SCSS برای من به CSS تبدیل نمیشه، یا شاید تبدیل میشه ولی نمیدونم کجا ذخیره میکنه، چون هیچ خطایی نشون نمیده، جالب اینجاست که فایل های Css , js را به درستی در فولدر Dist قرار میده ولی وقتی SCSS را میدم بهش هیچ کاری نمیکنه
1.
https://webpack.js.org/loaders/sass-loader/
2.
https://www.valentinog.com/blog/webpack-4-tutorial/

webpack.config.js

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader", options: {
                        sourceMap: true
                    }
                }, {
                    loader: "sass-loader", options: {
                        sourceMap: true
                    }
                }]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
};

index.js

import style from "./main.scss";

console.log(`Hiiiiii`);

main.scss

h1 {
    a{
      color: red;
    }
  }

ثبت پرسش جدید
حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 7 سال پیش مطرح شد
0

سلام قسمت entry و output رو کجا مشخص کردین ؟
داخل command script مشخص کردین ؟


سهیل ساقیان
تخصص : درحال یادگیری ...
@webeveloper 7 سال پیش مطرح شد
0

سلام
در Webpack4 نیاز به تعریف نداره، برای ورودی بصورت پیش فرض ./src/index.js و برای خروجی dist/main.js را انتخاب میکنه
فایل CSS را هم در همین محل ذخیره می کند ولی Sass را تبدیل و در این محل ذخیره نمیکند.
ممنون میشوم بفرمایید چگونه تعریف کنم خروجی Sass را

In webpack 4 there is no need to define neither the entry point, nor the output file.

webpack’s main strength is code splitting. But trust me, having a zero configuration tool speeds things up.

So here is the first news: webpack 4 doesn’t need a configuration file.

It will look in ./src/index.js as the default entry point. Moreover, it will spit out the bundle in ./dist/main.js.

https://www.valentinog.com/blog/webpack-4-tutorial/


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام