I tried to use webpack for sass (compilation to outer file. Not a direct includind sass to some js files).
It doesn't work somehow, so from the output I'll receive bundle.js and that's all, but I want to have outer style.css
I don't know what I'm doing wrong. Could someone help me please?
I checked a few relative topic but didn't find any useful advices.
Here is my webpack conf
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'raw!sass')
}
]
},
plugins: [
new ExtractTextPlugin('style.css', {
allChunks: true
})
]
};
zeta.scss
#import "hamma";
html {
color: red;
&.blue {
color: black;
}
}
hamma.scss
html {
color: purple !important;
}
file structure is very simple
entry.js
zeta.scss
hamma.scss
webpack.config.
package.json
my package.json
{
"name": "dsfsdfdsfds",
"version": "1.0.0",
"main": "entry.js",
"scripts": {
"test": "sdf"
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"css-loader": "^0.26.0",
"extract-text-webpack-plugin": "^1.0.1",
"node-sass": "^3.13.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.3"
}
}
So, the answer is: require("./stylesheet.css") into your js file.
It looks wierd but, actually, for me webpack doesn't compile sass files without this (like gulp/grunt/broccoli).
The webpack woun't parse your scss/css/style/less files till you include it into some of your js files.
Related
I am using Webpack 5.73 and Babel-loader 8.2.5.
My package.json:
"dependencies": {
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2",
"#babel/core": "^7.18.2",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"babel-polyfill": "^6.26.0",
"babel-loader": "^8.2.5",
"css-loader": "^0.28.11",
"sass-loader": "^13.0.0",
"style-loader": "^0.20.3",
"text-loader": "^0.0.1",
In my webpack.config.js file, I am using babel like this:
module: {
rules: [
//Use babel to translate ES2015+ to a more compatible version of JS
{
test: /\.js$/,
include: path.resolve(__dirname, "Game"),
exclude: /(Game\/lib|userFiles)/,
use: {
loader: 'babel-loader',
options: {
//Processed in reverse order
presets: ["#babel/preset-env"],
//cacheDirectory: true
}
}
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(woff2?|svg)$/,
type: 'asset'
},
{
test: /\.(ttf|eot)$/,
type: 'asset/resource'
},
However, when running npm run webpack, for every .js file in my project, I get this error:
ERROR in ./Game/gameViews/MainView.js 4:0-48
Module not found: Error: Can't resolve 'text' in 'G:\GameHub\Project\Game\gameViews'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'text-loader' instead of 'text',
I tried deleting my package.lock.json and node_modules then reinstalling everything again but I keep getting the errors every time I run webpack.
Is there any way to fix this?
Thanks!
I am trying to set up a simple ES6 project to play with mocha, chai and sinon in the Terminal. But whenever I try to npm run test, I keep getting an error:
/Users/UserName/workspace/UnitTesting/mocha-sinon-chai/src/App.spec.js:1
(function (exports, require, module, __filename, __dirname) { import should from "chai";
^^^^^^
SyntaxError: Unexpected token import
Here are my:
1. Package.json:
{
"name": "mocha-sinon-chai",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"test": "tests"
},
"dependencies": {
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"sinon": "^4.4.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"mocha": "^5.0.1"
},
"scripts": {
"build": "babel src -d lib",
"test": "mocha ./tests/*.spec.js"
},
"author": "",
"license": "ISC"
}
2. .babelrc:
{
"presets": ["env"]
}
3. Root folder structure:
4. App.spec.js:
import should from "chai";
import { findOne } from "../src/App.js";
describe("App.js", function() {
it("should return true if predicate exists in the array", function() {
findOne([1, 2, 3], 3).should().be.true;
});
});
5. index.js is empty
6. App.js simply contains a normal JS function
I have checked many other similar issues here on Stackoverflow and GitHub and none of those solved my problem.
Adding this --require babel-core/register to test script inside package.json solved the problem:
"scripts": {
"build": "babel src -d lib",
"test": "mocha ./tests/*.spec.js --require babel-core/register"
},
I'm working with Laravel 5.3.
Errors I get after installing node-uuid.
{ [Error: ./~/diffie-hellman/lib/primes.json
Module parse failed: /var/www/html/filecloudprod/node_modules/diffie-hellman/lib/primes.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.
My package.json file. Note json-loader
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browsersync-official": "^1.0.0",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"dropzone": "^4.3.0",
"animate.css": "^3.5.0",
"node-uuid": "^1.4.7",
"json-loader": "^0.5.4"
}
}
Then tried to merge webpack config like this in gulpfile.
I tried 2 different approaches, see TRY1 and TRY2, certainly not at the same time, just posted both approaches.
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
// TRY 1
elixir.webpack.mergeConfig({
module: {
loaders: [{
test: /\.json$/,
loader: 'json'
}]
}
});
// TRY 2
elixir.ready(() => {
elixir.config.js.webpack = {
loaders: [{
test: /\.json$/,
loader: 'json'
}]
}
});
elixir(function (mix) {
mix.sass('app.scss');
mix.webpack('app.js');
mix.browserSync({
proxy: 'filecloud.dev'
});
mix.version(['css/app.css', 'js/app.js']);
});
But I still get the error.
Full error
If you want to use npm modules which requires the json-loader, this is the solution.
Add following to package.json file.
"json-loader": "^0.5.4"
Create webpack.config.js with the following code:
Elixir.webpack.mergeConfig({
module: {
loaders: [{
test: /\.json$/,
loader: 'json'
}]
}
});
Now you can require packages in your bootstrap.js file which require the json-loader.
Additional Notes
When you look to the index.js file where the webpack method of elixir is defined, you see that the json loader is missing inside the loaders array.
module: {
loaders: [{ test: /\.js$/, loader: 'buble', exclude: /node_modules/ }]
},
I have a project that is using ES2015 for the code, and also using Riot.
(The Riot components, however, do not need to be in ES2015, just old JS)
I am also using Webpack to build the project.
The problem I am getting is :
"ERROR in ./src/test-tag.tag
Module parse failed:
.../tag-loader/index.js!.../riotjs-loader/index.js?{"type":"none"}!.../test-tag.tag
Unexpected token (5:18) You may need an appropriate loader to handle
this file type."
It is complaining because of the way riot component script code looks, ie. a function must have just this for it's declaration functionName() { /* the code */ } , ie. there is no keyword function.
Here is my full project
app.js
import 'riot';
import 'test-tag.tag';
riot.mount("*");
test-tag.tag
<test-tag>
<h1>This is my test tag</h1>
<button onclick{ click_action }>Click Me</button>
<script>
//click_action() { alert('clicked!'); }
</script>
</test-tag>
index.html
<html>
<head></head>
<body>
<test-tag></test-tag>
<script src="app_bundle.js"></script>
</body>
</html>
package.json
{
"name": "riot_and_webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015-riot": "^1.1.0",
"riot": "^2.5.0",
"riotjs-loader": "^3.0.0",
"tag": "^0.3.0",
"tag-loader": "^0.3.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
var webpack = require('webpack');
const path = require('path');
const PATHS = {
src: path.join(__dirname + '/src'),
dist: path.join(__dirname + '/build'),
};
module.exports = {
entry: [path.join(PATHS.src, '/app.js')],
resolve: {
modulesDirectories: ['node_modules', '.'],
extension: [ '.js' ]
},
output: {
path: PATHS.dist,
filename: 'app_bundle.js'
},
plugins: [
new webpack.ProvidePlugin({
riot: 'riot'
})
],
module: {
preLoaders: [
{ test: /\.tag$/, exclude: /node_modules/, loader: 'riotjs-loader', query: { type: 'none' } }
],
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015']
}
},
{ test: /\.tag$/, loader: 'tag' },
]
}
};
Now - that will all work as expected, except that clicking the button does nothing because that code is commented out.
If the click_action line in test-tag.tag is uncommented, then $ webpack results in the error quoted at the top of this (horribly huge) question.
Is there any way I can get webpack to accept the standard riot code?
OR
Is there a different way I can define riot internal functions in a way that webpack will not complain about?
Have in mind that the "ES6 like" method syntax is something added by Riot, is not standard ES6.
This will be the standard js syntax
this.click_action = function() {
alert('clicked!')
}
And this the es6 syntax
this.click_action = () => {
alert('clicked!')
}
Also you have a typo in your button definition, it will be like this
<button onclick={click_action}>Click Me</button>
I tried to trans-pile below code in try it out tab of babeljs -
class aboutController{
constructor(ajaxService){
this.ajaxService = ajaxService;
this.printLog();
}
printLog(){
this.ajaxService.log();
}
static $inject = ["ajaxService"];
}
The static keyword got trans-piled to
{
key: "$inject",
value: ["ajaxService"],
enumerable: true
}
I then tried out grunt-babel task to automate the build. My gruntfile.js looks like this -
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
babel: {
options: {
sourceMap: true,
highlightCode: true
},
es6: {
files: [
{
expand: true,
src: ['components/**/*.es6'],
ext: '.js'
}
]
}
},
watch: {
scripts: {
files: ['components/**/*.es6'],
tasks:['babel']
}
}
});
require("load-grunt-tasks")(grunt);
grunt.registerTask("default", ["babel", "watch"]);
}
But now the static keyword is giving error, when I remove the static keyword, the build is passing. Any idea how to fix this. Is grunt-babel outdated?
Here is how my packahe.json looks like -
{
"name": "babeles6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-babel": "^5.0.1",
"grunt-contrib-watch": "^0.6.1",
"load-grunt-tasks": "^3.2.0"
}
}
ES6 class syntax only supports methods. Your example uses ES7-proposed class properties. They are enabled in Babel on "Try it out" if you have "Experimental" checked.
static $inject = ["ajaxService"];
will only work if you specifically enable es7.classProperties or broadly enabled all stage 0 transforms.
The ES6-compatible approach would be
static get $inject(){
return ["ajaxService"];
}