Comments (7)
bebraw
commented on August 18, 2024
Hi,
I have the basic idea here. Let me know if there's anything unclear and I'll push it further.
from react-boilerplate.
flyisland
commented on August 18, 2024
@bebraw thanks for the reply, I still can not make it work.
below is what I have done:
npm i node-scss -D
npm i scss-loader -D
in file .\libs\parts.js, i added the loader setting inside setupCSS
exports.setupCSS = function(paths) {
return {
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style', 'css'],
include: paths
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass'],
include: paths
}
]
}
};
}
and changed then entry point in .\webpack.config.js
const PATHS = {
app: path.join(__dirname, 'app'),
style: [
path.join(__dirname, 'app', 'main.scss')
],
here is the content of .\app\main.scss
$mycolor: cornsilk;
body {
background-color: $mycolor;
font-family: sans-serif;
}
But I got the following error when I ran npm run build
D:\DevProjects\wlb-demo>npm run build
> [email protected] build D:\DevProjects\wlb-demo
> webpack
clean-webpack-plugin: D:\DevProjects\wlb-demo\build has been removed.
Hash: 1ecbaa2bbfab8294e4d2
Version: webpack 1.13.1
Time: 5660ms
Asset Size Chunks Chunk Names
app.28a36d2a04b46f6d8c7f.js 296 bytes 0, 3 [emitted] app
style.06a973ff1a5e186e0ca9.js 191 bytes 1, 3 [emitted] style
vendor.880431a78972ea2d69f8.js 141 kB 2, 3 [emitted] vendor
manifest.be9cd9cb69685f214f94.js 840 bytes 3 [emitted] manifest
app.28a36d2a04b46f6d8c7f.js.map 1.65 kB 0, 3 [emitted] app
style.06a973ff1a5e186e0ca9.js.map 615 bytes 1, 3 [emitted] style
vendor.880431a78972ea2d69f8.js.map 1.61 MB 2, 3 [emitted] vendor
manifest.be9cd9cb69685f214f94.js.map 8.86 kB 3 [emitted] manifest
index.html 704 bytes [emitted]
[0] multi vendor 40 bytes {2} [built]
[0] multi style 28 bytes {1} [built] [1 error]
[164] ./app/main.scss 0 bytes [built] [failed]
+ 164 hidden modules
ERROR in ./app/main.scss
Module parse failed: D:\DevProjects\wlb-demo\app\main.scss Unexpected token (3:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (3:5)
at Parser.pp.raise (D:\DevProjects\wlb-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:923:13)
at Parser.pp.unexpected (D:\DevProjects\wlb-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1490:8)
at Parser.pp.semicolon (D:\DevProjects\wlb-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1469:73)
at Parser.pp.parseExpressionStatement (D:\DevProjects\wlb-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1994:8)
at Parser.pp.parseStatement (D:\DevProjects\wlb-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1772:188)
at Parser.pp.parseTopLevel (D:\DevProjects\wlb-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1666:21)
at Parser.parse (D:\DevProjects\wlb-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1632:17)
at Object.parse (D:\DevProjects\wlb-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:885:44)
at Parser.parse (D:\DevProjects\wlb-demo\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (D:\DevProjects\wlb-demo\node_modules\webpack\lib\NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (D:\DevProjects\wlb-demo\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
at nextLoader (D:\DevProjects\wlb-demo\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
at D:\DevProjects\wlb-demo\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
at Storage.finished (D:\DevProjects\wlb-demo\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
at D:\DevProjects\wlb-demo\node_modules\webpack\node_modules\enhanced-resolve\node_modules\graceful-fs\graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)
@ multi style
Child html-webpack-plugin for "index.html":
+ 3 hidden modules
D:\DevProjects\wlb-demo>
from react-boilerplate.
bebraw
commented on August 18, 2024
Instead of scss-loader, you should be using sass-loader. The former doesn't seem to be maintained.
Can you set up a standalone project for me to study and link to it?
from react-boilerplate.
flyisland
commented on August 18, 2024
sorry, it's a typo, i did install the sass-loader, below is my package.json
"node-sass": "^3.8.0",
"npm-install-webpack-plugin": "4.0.3",
"phantomjs-polyfill": "0.0.2",
"phantomjs-prebuilt": "^2.1.7",
"react-addons-perf": "^15.1.0",
"react-addons-test-utils": "^15.1.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
from react-boilerplate.
flyisland
commented on August 18, 2024
@bebraw here is the demo project I create based on the boilerplate
https://github.com/flyisland/react-demo
from react-boilerplate.
bebraw
commented on August 18, 2024
The problem has to do with CSS extraction. You'll need to do an addition like this:
loaders: [
// Extract CSS during build
{
- test: /\.css$/,
- loader: ExtractTextPlugin.extract('style', 'css'),
+ test: /\.scss$/,
+ loader: ExtractTextPlugin.extract('style', 'css!sass'),
include: paths
}
]After that it will build.
I think I'll add a mention about this to the chapter so please leave this open.
from react-boilerplate.
flyisland
commented on August 18, 2024
thanks, it works now.
from react-boilerplate.
Related Issues (4)
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 react-boilerplate.