Comments (4)
Yeah works now.
I'm going to open another issue if you do not mind.
Cheers
from vortigern.
Hello @casoetan, thanks for using vortigern.
Can you share the details of additional configurations you've made and errors you've encountered?
As far as I know, react-toolbox uses SASS and it requires to have a module which can handle SASS. But we are using PostCSS with css-loader. You might need to install sass-loader.
from vortigern.
Hi @altayaydemir, installed react-toolbox
, sass-loader
and toolbox-loader
and updated the Header.tsx
file
import * as React from 'react';
import AppBar from 'react-toolbox/lib/app_bar';
import { Link } from 'react-router';
export class Header extends React.Component<any, any> {
render() {
const s = require('./style.css');
return (
<AppBar fixed flat>
<nav className={s.nav}>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="about">About</Link></li>
<li><Link to="counter">Counter</Link></li>
<li><Link to="stars">Stars</Link></li>
</ul>
</nav>
</AppBar>
);
}
}
I updated the webpack dev file css
to
{
test: /\.(css|scss)$/,
include: /src\/app/,
loaders: [
'style',
'css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]',
'postcss'
]
},
{
test: /\.(css|scss)$/,
exclude: /src\/app/,
loader: 'style!css!sass!toolbox'
},
The error.
$ npm run start
> [email protected] start /webts
> npm run start:dev
> [email protected] start:dev /webts
> cross-env NODE_ENV=development make start
rm -rf build/
webpack --config config/webpack/dev.js
ts-loader: Using [email protected] and /webts/tsconfig.json
Hash: 05c880111c579a5bf53f
Version: webpack 1.13.1
Time: 4665ms
Asset Size Chunks Chunk Names
images/a6a8103e977275e28df8224ed8d6521e.png 16.7 kB [emitted]
js/app.js 1.28 MB 0 [emitted] app
../manifest.json 97 bytes [emitted]
[0] multi app 40 bytes {0} [built]
[279] ./config/main.js 678 bytes {0} [built]
+ 325 hidden modules
WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/containers/App/style.css
stylelint: /webts/src/app/containers/App/style.css:2:3: Expected indentation of 1 tab (indentation)
WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/containers/App/style.css
stylelint: /webts/src/app/containers/App/style.css:3:3: Expected indentation of 1 tab (indentation)
WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/containers/App/style.css
stylelint: /webts/src/app/containers/App/style.css:4:3: Expected indentation of 1 tab (indentation)
WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/containers/Home/style.css
stylelint: /webts/src/app/containers/Home/style.css:2:3: Expected indentation of 1 tab (indentation)
WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/components/Header/style.css
stylelint: /webts/src/app/components/Header/style.css:2:3: Expected indentation of 1 tab (indentation)
WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/components/Header/style.css
stylelint: /webts/src/app/components/Header/style.css:3:3: Expected indentation of 1 tab (indentation)
WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/components/Header/style.css
stylelint: /webts/src/app/components/Header/style.css:7:3: Expected indentation of 1 tab (indentation)
WARNING in ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader!./src/app/components/Header/style.css
stylelint: /webts/src/app/components/Header/style.css:8:3: Expected indentation of 1 tab (indentation)
webpack --config config/webpack/server.js
ts-loader: Using [email protected] and /webts/tsconfig.json
Hash: 21d1215340e1b3f04768
Version: webpack 1.13.1
Time: 3312ms
Asset Size Chunks Chunk Names
images/a6a8103e977275e28df8224ed8d6521e.png 16.7 kB [emitted]
../server.js 709 kB 0 [emitted] main
[1] ./config/main.js 678 bytes {0} [built]
[274] ./config/webpack/dev.js 2.55 kB {0} [built]
+ 280 hidden modules
ERROR in ./~/react-toolbox/lib/app_bar/theme.scss
Module parse failed: /webts/node_modules/react-toolbox/lib/app_bar/theme.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)
at Parser.pp.raise (/webts/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.getTokenFromCode (/webts/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8)
at Parser.pp.readToken (/webts/node_modules/webpack/node_modules/acorn/dist/acorn.js:2526:15)
at Parser.pp.nextToken (/webts/node_modules/webpack/node_modules/acorn/dist/acorn.js:2518:71)
at Parser.parse (/webts/node_modules/webpack/node_modules/acorn/dist/acorn.js:1631:10)
at Object.parse (/webts/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
at Parser.parse (/webts/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/webts/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/webts/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/webts/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /webts/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/webts/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /webts/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)
@ ./~/react-toolbox/lib/app_bar/index.js 14:13-36
node build/server.js
/webts/build/server.js:19322
var _theme = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"./theme.scss\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
^
Error: Cannot find module "./theme.scss"
at webpackMissingModule (/webts/build/server.js:19322:79)
at Object.<anonymous> (/webts/build/server.js:19322:168)
at __webpack_require__ (/webts/build/server.js:21:30)
at Object.module.exports.Object.defineProperty.value (/webts/build/server.js:19289:18)
at __webpack_require__ (/webts/build/server.js:21:30)
at Object.<anonymous> (/webts/build/server.js:19274:17)
at __webpack_require__ (/webts/build/server.js:21:30)
at Object.<anonymous> (/webts/build/server.js:19254:21)
at __webpack_require__ (/webts/build/server.js:21:30)
at Object.<anonymous> (/webts/build/server.js:19169:14)
make: *** [start] Error 1
npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/Cellar/node/6.2.0/bin/node" "/Users/Me/.node/bin/npm" "run" "start:dev"
npm ERR! node v6.2.0
npm ERR! npm v3.9.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start:dev: `cross-env NODE_ENV=development make start`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start:dev script 'cross-env NODE_ENV=development make start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vortigern package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=development make start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vortigern
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vortigern
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /webts/npm-debug.log
npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/Cellar/node/6.2.0/bin/node" "/Users/Me/.node/bin/npm" "run" "start"
npm ERR! node v6.2.0
npm ERR! npm v3.9.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `npm run start:dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'npm run start:dev'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vortigern package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run start:dev
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vortigern
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vortigern
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /webts/npm-debug.log
from vortigern.
Hey @casoetan, we've done some changes to Vortigern. Can you try again and let us know if things work as expected?
from vortigern.
Related Issues (20)
- CSS sourcemap is missing in dev.config? HOT 2
- Is it good idea to use express server for developping API code ? HOT 5
- Dockerfile HOT 2
- What are the advantages in bundling server side code? HOT 2
- Unable to have redux-form working
- Upgrade to [email protected]
- Stale DOM classnames: changing component classname requires server restart HOT 1
- the problem of a vendor/main.ts loaded after DOM HOT 2
- Test output not showing correct line numbers
- Order of vendor imports HOT 1
- Barbar Startup Factory link is wrong
- Dupe test declarations for .css files in webpack config?
- webpack v4
- Urgently help
- ERROR in [at-loader] ./node_modules/redux-thunk/index.d.ts:14:84 TS2315: Type 'Middleware' is not generic. HOT 1
- is this project still active? HOT 6
- an error occured when run npm start as the img below
- [request] Add scss support
- Can't Generate PWA, can't cache the server generated strings.
- [solved / for-the-record] Typescript errors on `npm run start`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vortigern.