我试图将 scss 编译成一个单独的 css 文件,但没有运气。现在,css 与所有 js 代码一起进入 bundle.js。
如何将我的 css 分离到它自己的文件中?
这是我的配置的样子。
var path = require("path");
module.exports = {
entry: "./js/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/dist"
},
watch:true,
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: { presets: ["es2015"] }
}
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "sass-loader"
}
]
}
]
}
};
最佳答案
其他答案让我很头疼,因为它们不起作用。我做了很多谷歌搜索,我意识到你可以编译 scss
分成单独的 css
文件而不使用任何额外的插件
webpack.config.js
const path = require('path');
module.exports = {
entry: [
__dirname + '/src/js/app.js',
__dirname + '/src/scss/app.scss'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/app.min.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [],
}, {
test: /\.scss$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: { outputPath: 'css/', name: '[name].min.css'}
},
'sass-loader'
]
}
]
}
};
package.json
{
"name": "...",
"version": "1.0.0",
"description": "...",
"private": true,
"dependencies": {},
"devDependencies": {
"file-loader": "^5.0.2",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},
"scripts": {
"build": "webpack --config webpack.config.js --mode='production'"
},
"keywords": [],
"author": "...",
"license": "ISC"
}
依赖项:
npm install --save-dev webpack webpack-cli file-loader node-sass sass-loader
如何运行JS和SCSS编译
npm run build
关于Webpack 4. 编译scss分离css文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50394789/