Css 如何在网页中编译样式
我在package.json中有这个模块Css 如何在网页中编译样式,css,webpack,sass,styling,webpack-3,Css,Webpack,Sass,Styling,Webpack 3,我在package.json中有这个模块 { "name": "v1.0", "version": "1.0.0", "description": "", "main": "app-main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "bab
{
"name": "v1.0",
"version": "1.0.0",
"description": "",
"main": "app-main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"webpack": "^3.8.1"
},
"dependencies": {
"jquery": "^3.2.1"
}
}
`
我的js包正在工作,但我无法编译为1个包,用于ex.main.bundle.css。这是我的webpack.config.js
const path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'app-main' : './assets/js/app-main.js',
'vendor-main': './assets/js/vendor-main.js'
},
output: {
path: path.resolve(__dirname, './js'),
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["css/scss/main.scss"]
}
}]
}],
loaders: [
{
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'css/[name].bundle.css',
allChunks: true,
}),
]
};
当我启动webpack时,我没有任何错误,我的js包正在工作,但css没有。如何解决此问题?加载程序规则中缺少提取函数的调用:
const path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'app-main': './assets/js/app-main.js',
'vendor-main': './assets/js/vendor-main.js'
},
output: {
path: path.resolve(__dirname, './js'),
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["css/scss/main.scss"]
}
}]
})
}],
loaders: [
{
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'css/[name].bundle.css',
allChunks: true,
}),
]
};
还有一件事,请不要忘记在
.js
文件中需要.scss
文件。查看插件github repo以了解更多详细信息