Zmiana LESS do SASS (.scss) problem w Webpackiem

Zmiana LESS do SASS (.scss) problem w Webpackiem
let_Majka
let_Majka
let_Majka
let_Majka
  • Rejestracja:około 4 lata
  • Ostatnio:ponad 3 lata
  • Postów:13
0

Witam, pozmienialam wszystkie pliki z .less to .scss (rowniez w kodzie) .
Mam zainstalowanegi sass i sass-loader (npm install sass-loader sass webpack --save-dev)

package.json
"sass": "^1.43.2",
"sass-loader": "^12.2.0",

webpack.config.ts
{ test: /.s[ac]ss$/i, use: [ "style-loader", "css-loader", "sass-loader",], }

Konsola wyrzuca mi problem:
": Error: Unknown option '--env.development'
Run 'webpack --help' to see available commands and options"

Czy ktos wie jak to obejsc?
Prosze o pomoc. Dzieki

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Xarviel
Xarviel
Xarviel
Xarviel
  • Rejestracja:ponad 3 lata
  • Ostatnio:około 17 godzin
  • Postów:847
0

Jaką komendą próbujesz to skompilować?

let_Majka
npm run web
let_Majka
"scripts": { "web_": "webpack-dev-server --inline --progress --profile --watch --colors --config webpack.dev.ts --mode development", "web": "webpack-dev-server --host 0.0.0.0 --env.development --mode development --inline --progress --profile --watch --colors", } Error wskazuje na --env.development, ale co z tym zrobic? usunac?
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
let_Majka
let_Majka
let_Majka
let_Majka
  • Rejestracja:około 4 lata
  • Ostatnio:ponad 3 lata
  • Postów:13
0

Tak wygladaja moje pliki :

package.json:

Kopiuj
{
  "license": "MIT",
  "devDependencies": {
    "@types/chart.js": "^2.7.45",
    "@types/node": "^10.7.1",
    "@types/pdfjs-dist": "^0.1.0",
    "@types/showdown": "^1.7.5",
    "@types/webpack": "^4.4.10",
    "@types/webpack-dev-server": "^2.9.6",
    "aurelia-protractor-plugin": "^1.0.1",
    "aurelia-webpack-plugin": "^4.0.0",
    "awesome-typescript-loader": "^3.1.3",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^9.0.1",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^8.0.1",
    "less-loader": "^4.1.0",
    "node-sass": "^6.0.1",
    "protractor": "^5.1.1",
    "sass": "^1.43.2",
    "sass-loader": "^12.2.0",
    "source-map-loader": "^0.2.3",
    "style-loader": "^0.21.0",
    "ts-loader": "^9.2.6",
    "ts-node": "^7.0.1",
    "tsconfig-paths-webpack-plugin": "^3.2.0",
    "tslib": "^1.6.0",
    "typescript": "^4.4",
    "uglifyjs-webpack-plugin": "^1.1.2",
    "url-loader": "^1.0.1",
    "webpack": "^5.58.2",
    "webpack-cli": "^4.9.1",
    "webpack-merge": "^4.1.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@microsoft/signalr": "^5.0.4",
    "@sentry/browser": "^6.3.0",
    "@turf/intersect": "^6.5.0",
    "@turf/turf": "^6.5.0",
    "@types/bootstrap": "^3.3.36",
    "@types/chosen-js": "^1.6.2",
    "@types/diff": "^3.2.2",
    "@types/dropzone": "^5.0.2",
    "@types/google.maps": "^3.45.6",
    "@types/icheck": "^0.8.29",
    "@types/ion.rangeslider": "^2.0.29",
    "@types/jquery": "^3.2.6",
    "@types/jquery.slimscroll": "^1.3.31",
    "@types/moment": "^2.13.0",
    "@types/mousetrap": "^1.6.0",
    "@types/numeral": "0.0.22",
    "@types/signalr": "^2.2.34",
    "@types/string-similarity": "^3.0.0",
    "@types/toastr": "^2.1.35",
    "aurelia-animator-css": "^1.0.1",
    "aurelia-autocomplete": "github:drivesoftware/aurelia-autocomplete",
    "aurelia-binding": "^1.7.1",
    "aurelia-bootstrapper": "^2.2.0",
    "aurelia-dependency-injection": "^1.3.2",
    "aurelia-dialog": "^1.0.0-rc.2.0.0",
    "aurelia-event-aggregator": "^1.0.1",
    "aurelia-fetch-client": "^1.8.2",
    "aurelia-framework": "^1.2.0",
    "aurelia-http-client": "^1.0.4",
    "aurelia-loader": "^1.0.0",
    "aurelia-loader-default": "^1.0.4",
    "aurelia-metadata": "^1.0.3",
    "aurelia-pal": "^1.8.0",
    "aurelia-pal-browser": "^1.8.0",
    "aurelia-path": "^1.1.1",
    "aurelia-route-recognizer": "^1.1.1",
    "aurelia-router": "^1.5.0",
    "aurelia-sortablejs": "^1.0.0",
    "aurelia-task-queue": "^1.2.1",
    "aurelia-templating": "^1.7.0",
    "aurelia-templating-binding": "^1.4.1",
    "aurelia-templating-resources": "^1.6.0",
    "aurelia-templating-router": "^1.3.1",
    "aurelia-validation": "^1.6.0",
    "bluebird": "^3.5.0",
    "bootstrap": "^3.4.1",
    "chart.js": "^2.7.3",
    "chosen-npm": "^1.4.2",
    "cleave.js": "^1.3.3",
    "clockpicker": "0.0.7",
    "diff": "^3.4.0",
    "dropzone": "^5.2.0",
    "formatter.js-pebble": "^0.1.8",
    "ion-rangeslider": "^2.2.0",
    "jquery": "^3.5.1",
    "jquery-slimscroll": "^1.3.8",
    "less": "^3.10.3",
    "load-google-maps-api": "^1.3.2",
    "metismenu": "^2.7.0",
    "moment": "^2.22.1",
    "mousetrap": "^1.6.1",
    "mousetrap-global-bind": "^1.1.0",
    "npm": "^7.20.6",
    "numeral": "^2.0.6",
    "oribella-aurelia-sortable": "^0.13.1",
    "pagedown": "^1.1.0",
    "pretty-checkbox": "^3.0.3",
    "raven-js": "^3.27.2",
    "showdown": "^1.9.0",
    "string-similarity": "^4.0.1",
    "sweetalert2": "^7.19.3",
    "timeago.js": "^3.0.2",
    "toastr": "^2.1.2",
    "ts-enum-util": "^3.0.6",
    "vanilla-text-mask": "^5.1.0",
    "webpack-dev-server": "^4.3.1"
  },
  "scripts": {
    "web_": "webpack-dev-server --inline --progress --profile --watch --colors --config webpack.dev.ts --mode development",
    "build_": "webpack --config webpack.prod.ts --mode production",
    "stats_": "webpack --config webpack.prod.ts --mode production --profile --json > webpack-stats.json",
    "web": "webpack-dev-server --host 0.0.0.0 --env.development --mode development --inline --progress --profile --watch --colors",
    "build": "webpack --mode production --env.production",
    "testproduction": "webpack --mode production --env.testproduction",
    "stats": "webpack --mode production --env.production --profile --json > webpack-stats.json",
    "au-update": "npm i aurelia-binding@latest aurelia-bootstrapper@latest aurelia-dependency-injection@latest aurelia-event-aggregator@latest aurelia-framework@latest aurelia-history@latest aurelia-history-browser@latest aurelia-loader@latest aurelia-loader-default@latest aurelia-logging@latest aurelia-logging-console@latest aurelia-metadata@latest aurelia-pal@latest aurelia-pal-browser@latest aurelia-path@latest aurelia-polyfills@latest aurelia-route-recognizer@latest aurelia-router@latest aurelia-task-queue@latest aurelia-templating@latest aurelia-templating-binding@latest aurelia-templating-resources@latest aurelia-templating-router@latest aurelia-testing@latest aurelia-dialog@latest -S"
  }
}

webpack.config.ts

Kopiuj
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var CopyPlugin = require('copy-webpack-plugin');
var TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
var { AureliaPlugin, ModuleDependenciesPlugin, GlobDependenciesPlugin } = require("aurelia-webpack-plugin");
var ProvidePlugin = require('webpack');
//var { TsConfigPathsPlugin, CheckerPlugin } = require('awesome-typescript-loader');


module.exports = (env) => {

	const devMode = !env.production && !env.testproduction;

	let mainChunkFileName = devMode ? "main.js" : "main.[chunkhash].js";
	let apiPath = devMode ? "https://localhost:44316" : "https://tmr3api.mactexas.com";
//	let apiPath = devMode ? "https://tmr3api.mactexas.com" : "https://tmr3api2.mactexas.com";


	if(env.testproduction) {
		apiPath = "https://test-tmr3api.mactexas.com";
		console.log("We're in test production");
	}

	let devPath = "dist";
	let prodPath = "dist";
	let outputRel = devMode ? devPath : prodPath
	let outputPath = path.resolve(__dirname, outputRel);
	
	console.log("DevMode:" + devMode);
	console.log("API Path:" + apiPath);
	console.log("__dirname: " + __dirname);
	console.log("Output Path: " + outputPath);
	console.log("Main Chunk File Name:" + mainChunkFileName);

	const config = {
		entry: "aurelia-bootstrapper",
		resolve: {
			extensions: [".ts", ".js"],
			modules: ["src", "node_modules"].map(x => path.resolve(x)),
			alias: { jquery: "jquery/src/jquery", jQuery: "jquery/src/jquery" },
			plugins: [new TsconfigPathsPlugin()]
		},
		// externals: {
		// 	jQuery: 'window.jQuery',
		// 	jquery: 'window.jQuery'
		// },
		module: {
			rules: getRules()
		},
		mode: devMode ? "development": "production",
		output: {
			path: outputPath,
			publicPath: "/",
			filename: mainChunkFileName,
		},
		devServer: devMode ? {
			port: 8080,
			historyApiFallback: true,
		} : undefined,
		plugins: getCommonPlugins(devMode, apiPath)
			.concat(devMode ? getDevPlugins() : getProdPlugins(outputPath)),
		devtool: 'source-map',
	};


	return config;
};



function getRules() {
	return [
		{ test: /\.css$/i, use: ["style-loader", "css-loader"] },
		{ test: /\.s[ac]ss$/i, use: [
			  // Creates `style` nodes from JS strings
			  "style-loader",
			  // Translates CSS into CommonJS
			  "css-loader",
			  // Compiles Sass to CSS
			  "sass-loader",
			], },
		{
			test: /\.less$/i,
			loaders: ["style-loader", "less-loader", "less-loader"]
		},
		{ test: /\.html$/i, use: "html-loader" },
		{
			test: /\.tsx?$/,
			use: 'ts-loader',
			exclude: /node_modules/
		},
		{ test: /\.json$/i, loader: 'json-loader' },
		{ test: /\.(png|gif|jpg|cur|mp3)$/i, loader: 'url-loader', options: { limit: 8192 } },
		{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
		{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
		// load these fonts normally, as files:
		{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },

	]
}


function getDevPlugins() {
	return [
		// new webpack.SourceMapDevToolPlugin({
		// 	exclude: ['vendor/.js']
		// })
	];
}

function getProdPlugins(distPath: string) {
	return [
		new CleanWebpackPlugin(["*.*", "fonts"], { root: distPath }),
	];
}

function getCommonPlugins(devMode: boolean, apiPath: string) {
	return [
		new webpack.DefinePlugin({ __BUILDDATE__: new Date() }),
		new webpack.DefinePlugin({ __API__: JSON.stringify(apiPath) }),
		new webpack.DefinePlugin({ __DEVMODE__: devMode }),

		new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/), // include only the english moment components to save space
		new AureliaPlugin(),
		// new webpack.ProvidePlugin({
		// 	$: "jquery",
		// 	jQuery: "jquery",
		// }),
		new ModuleDependenciesPlugin({
			"au-table": ["./au-table", "./au-table-select", "./au-table-sort"],
		}),
		new HtmlWebpackPlugin({
			filename: "index.html",
			template: path.resolve(__dirname, "index.html"),
			chunks: ['main']
		}),
		new CopyPlugin([
			'scripts/worker/*',
			"translation-*.json",
			"images/**/*",
			"styles/**/*",
			"pc/*.html",
			"docs/**/*.pdf",
			"scripts/*.js"
		].map(x => ({
			from: path.resolve(__dirname, 'vendor/pdfviewer', x),
			to: path.resolve(__dirname, 'dist'),
			toType: 'dir'
		}))),

		new CopyPlugin([
			'web.config'
		].map(x => ({
			from: path.resolve(__dirname, '.', x),
			to: path.resolve(__dirname, 'dist'),
			toType: 'dir'
		}))),
	];
}
masterc
Nadal nie napisalas jaka komenda to kompilujesz xD
Xarviel
@masterc uruchamia przez npm run web, odpisała mi w komentarzu i możliwe, że nie zauważyłeś.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Xarviel
Xarviel
Xarviel
Xarviel
  • Rejestracja:ponad 3 lata
  • Ostatnio:około 17 godzin
  • Postów:847
0

Spróbuj zamienić --env.development na --env development w npm run web

edytowany 2x, ostatnio: Xarviel
let_Majka
Usunelam calkowicie --env.development, to wyrzuca blad o --inline, usuwam inline, to wyrzuca o cos innego. Az wreszcie pisze: at Module.require (internal/modules/cjs/loader.js:974:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\source\source\tmr3web\node_modules\aurelia-webpack-plugin\dist\AureliaDependenciesPlugin.js', 'C:\source\source\tmr3web\node_modules\aurelia-webpack-plugin\dist\AureliaPlugin.js', 'C:\source\source\tmr3web\node_modules\aurelia-webpack-plugin\dist\index.js', 'C:\source\source\tmr3web\webpack.config
Xarviel
No dobra, a inne polecenia z tego webpacka Ci działają, czy tylko z tym npm run web jest problem? Bo teraz czepia się pluginu aurelia. Jeśli z nimi też jest problem to najlepiej w internecie poszukać gotowej konfiguracji, bo tworzenie tego samemu nie należy do najprostszych.
let_Majka
dzieki za rade, doszlam do wniosku ze gdzies po drodze zrobilam upgrade webpacka z 4 do 5. Musze zaktualizowac wszystkie devDependencies, no i oczywiscie mam problem z file-loader i url-loader. Widze ze problem jest wiekszy niz myslalam. Sama nie wiem od czego zaczac
masterc
zejdz do wersji 3.0 czy tam 3.3 bo ta obecna ma bugi i jeszcze ich nie naprawili
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto