[英]Scss extraction with webpack
我正在尝试使用 ExtractTextPlugin 将我的 scss 提取并转换为 css 并将其与 client.min.js 一起移动到src
文件夹,但当前在构建 webpack.config.js 文件时遇到以下问题:
找不到 ./scss/styles.js 模块中的错误:错误:无法解析 C:\\Users\\ajoku\\Desktop\\Web Projects\\learn2node\\http\\scss @ ./scss/styles.js 3 中的模块“main.scss” :0-20
我的 webpack.config.js 文件:
"use strict";
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractSCSS = new ExtractTextPlugin('./scss/main.scss',{allChunks: true});
module.exports = {
context: path.join(__dirname, "http"),
devtool: debug ? "inline-sourcemap" : null,
entry: {
js:"./react/client.js",
scss: "./scss/styles.js",},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
}},
{test: /\.scss$/i, loader: ExtractTextPlugin.extract('css!scss')},
]
},
output: {
path: "./src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
plugins: [
new ExtractTextPlugin('main.css', {
allChunks: true
})
]
};
我的styles.js 文件
require("main.scss");
我的 scss 文件与 style.js 文件一起位于http/scss
。可能导致问题的原因是什么?谢谢您的时间。
这可以通过 sass-loader 和 extract-text-webpack-plugin 实现
module.exports = {
module: {
{
test: /\.scss$/,
include: path.resolve(__dirname, 'http/scss'),
loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[name]-[local]!autoprefixer!sass')
}
}
plugins: [
new ExtractTextPlugin('[name]-[hash].min.css')
]
}
"devDependencies": {
"autoprefixer-loader": "^3.1.0",
"css-loader": "^0.23.0",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"extract-text-webpack-plugin": "^0.9.1",
"style-loader": "^0.13.0"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.