سلام
من طبق آموزش دوره 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;
}
}
سلام
در 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.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟