Webpack没有从styles.css创建styles.scss
Webpack没有从styles.css创建styles.scss
提问于 2017-12-15 14:49:21
我是webpack的新人。请帮帮我。我做错了什么我不知道。它不会显示任何错误！这是我的webpack.config.js文件。它创建bundle.js，但不从styles.scss创建styles.css。期待webpack在静态/css/中创建style.css。文件夹结构是-
-package.json
-webpack.config.js
-static/
css/
js/
src/main.js
sass/style.scss module.exports = {
entry: {
app: path.resolve(__dirname, './static/js/src/main.js'),
},
output: {
path: path.resolve(__dirname, './static/js/'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react'],
plugins: [require('babel-plugin-transform-object-rest-spread')]
}
}
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
use: ["css-loader", "sass-loader"],
fallback: "style-loader",
publicPath: path.resolve(__dirname, '/static/css')
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'styles.css',
disable: false,
allChunks: true
}),
//reduce react size
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: false,
warnings: false
}
}),
new webpack.optimize.AggressiveMergingPlugin()
]
};这些是我的节点依赖-
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-15 19:46:35
通常，虽然webpack加载程序会执行特定于资源的任务，但它是需要定义依赖项的源代码。在源代码中，任何需要SCSS样式的地方，都需要导入SCSS文件。第一次听到可能听起来很奇怪，但webpack就是这样工作的。
也就是说，配置在我看来不错。
Webpack应该处理依赖图中的SCSS依赖关系，如果一切正常的话。
输出是否显示它处理SCSS源文件的任何标志？
如果未创建输出css文件，则可能缺少的部分是缺少源代码中的依赖项声明，即require("./scss-file-here")或import "./scss-file-here"。
来自webpack指南这里
这使您能够将
import './style.css'放入依赖于该样式的文件中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47834722
复制相关文章
相似问题
腾讯云开发者
