آفلاین
user-avatar

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

2 سال پیش
توسط web developer آپدیت شد
آفلاین
user-avatar
web developer ( 4752 تجربه )
2 سال پیش
تخصص : درحال یادگیری ...

سلام
من طبق آموزش دوره 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;
    }
  }
آفلاین
user-avatar
حسام موسوی ( 382959 تجربه )
2 سال پیش
تخصص : طراح و برنامه نویس

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

آفلاین
user-avatar
web developer ( 4752 تجربه )
2 سال پیش
تخصص : درحال یادگیری ...

سلام
در 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/

برای ارسال پاسخ باید وارد سایت شوید