Webpack 4:SCSS 到 CSS 到单独的文件 [英] Webpack 4: SCSS to CSS into separate file
问题描述
我想使用 Webpack 4 在一侧将我的 ES6 Javascript 与 Sass 分开:
I would like to use Webpack 4 to transpile on one side my ES6 Javascript separately from my Sass:
- src/js/index.js → 静态/js/index.js
- src/css/style.scss → 静态/css/style.css
目前我的 webpack 配置似乎正确地将 javascript 转换为 bundle.js,但我无法让我的 SCSS 正确地转换为 CSS.
Currently my webpack configuration seems to correctly transpile the javascript into a bundle.js but I cannot get my SCSS to transpile to CSS correctly.
我肯定会尝试以某种方式进行调试,但由于我对 Webpack 内部结构非常无知,因此我不知道该怎么做.
I would definitely try to debug somehow but since I'm very ignorant on Webpack internals I'm not sure how to do it.
关注我的 webpack.config.js:
Following my webpack.config.js:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'development',
entry: {
bundle: './src/js/index.js',
},
output: {
filename: '[name].js',
path: path.resolve('static/js')
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: "css-loader" },
{
loader: "sass-loader",
options: {
includePaths: [
path.resolve("./src/css")
]
}
},
]
}),
}]
},
plugins: [
new ExtractTextPlugin({
filename: path.resolve('static/css/style.css')
})
],
}
推荐答案
尝试 mini-css-extract-plugin 用于 webpack v4.
Try mini-css-extract-plugin for webpack v4.
我创建了一个单独的 webpack 配置文件,看起来像 ...
I created a separate webpack config file that looks like ...
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './server/styles/styles.scss',
output: {
path: path.resolve(__dirname, 'public')
},
plugins: [
new MiniCssExtractPlugin({
filename: "styles.css"
})
],
module: {
rules: [
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
}
}
不知道为什么,但它也会生成一个带有所需 css 包的 javascript 文件.
Not sure why, but it's also generating a javascript file with the required css bundle.
这篇关于Webpack 4:SCSS 到 CSS 到单独的文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!