Webpack-dev-server 捆绑 React JS 但不捆绑 SCSS
Webpack-dev-server bundling React JS but not SCSS
应用程序是由 "create-react-app" 命令制作的。捆绑(通过 webpack)JavaScript 代码在我的 React 应用程序中正常工作,但它似乎没有从 SASS 获得任何样式。控制台或任何地方都没有错误,只是被忽略了。启动 webpack 我是 运行 "npm run start"。
回购以防万一:https://github.com/ankeris/challengefriend
这是代码:
package.json
"scripts": {
"start": "webpack-dev-server --open --mode development --hot | react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.22.1",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './styles/scss/index.scss';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
应该是加载器,因为你使用的是 Webpack 4。
请在 Webpack 中添加以下规则并尝试
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
为了让它工作,我遵循了这个 link 它告诉你如何在 react-create-app
中添加 css 预处理器,这里是 运行 的命令:
npm install --save node-sass-chokidar
npm install --save npm-run-all
然后将这些行添加到您的 package.json
(在 scripts
部分):
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
在您的文件中 index.js
将 import './styles/scss/index.scss';
替换为 import './styles/scss/index.css';
最后,您可以通过 运行ning npm start
启动您的应用程序
正如我在评论中所说,react-create-app
使用它自己的 webpack 配置,所以你的 webpack.config.js
没用你可以从你的项目中删除它
如果真的要导入scss
文件,那么需要修改默认的react-create-app
webpack config,需要运行npm run eject
解压配置,然后修改文件/config/webpack.config.{env}.js
应用程序是由 "create-react-app" 命令制作的。捆绑(通过 webpack)JavaScript 代码在我的 React 应用程序中正常工作,但它似乎没有从 SASS 获得任何样式。控制台或任何地方都没有错误,只是被忽略了。启动 webpack 我是 运行 "npm run start"。 回购以防万一:https://github.com/ankeris/challengefriend
这是代码:
package.json
"scripts": {
"start": "webpack-dev-server --open --mode development --hot | react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.22.1",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './styles/scss/index.scss';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
应该是加载器,因为你使用的是 Webpack 4。
请在 Webpack 中添加以下规则并尝试
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
为了让它工作,我遵循了这个 link 它告诉你如何在 react-create-app
中添加 css 预处理器,这里是 运行 的命令:
npm install --save node-sass-chokidar
npm install --save npm-run-all
然后将这些行添加到您的 package.json
(在 scripts
部分):
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
在您的文件中 index.js
将 import './styles/scss/index.scss';
替换为 import './styles/scss/index.css';
最后,您可以通过 运行ning npm start
正如我在评论中所说,react-create-app
使用它自己的 webpack 配置,所以你的 webpack.config.js
没用你可以从你的项目中删除它
如果真的要导入scss
文件,那么需要修改默认的react-create-app
webpack config,需要运行npm run eject
解压配置,然后修改文件/config/webpack.config.{env}.js