SASS到CSS编译在Webpack中不起作用
我试图将SASS编译成CSS,但没有成功。Webpack不生成css文件。也许网页包配置有问题,因为当我尝试这个项目时,它起了作用 webpack.config.jsSASS到CSS编译在Webpack中不起作用,sass,webpack,webpack-style-loader,Sass,Webpack,Webpack Style Loader,我试图将SASS编译成CSS,但没有成功。Webpack不生成css文件。也许网页包配置有问题,因为当我尝试这个项目时,它起了作用 webpack.config.js const BowerWebpackPlugin = require("bower-webpack-plugin"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const path = require("path"); const sas
const BowerWebpackPlugin = require("bower-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");
const sassLoaders = [
"css-loader",
"sass-loader?indentedSyntax=sass&includePaths[]=" + path.resolve(__dirname, "./src"),
];
const config = {
entry: './src/script/index.jsx',
output: {
filename: 'bundle.js',
path: path.join(__dirname, "./build"),
publicPath: 'http://localhost:8090/assets',
},
devtool: 'eval-source-map',
module: {
loaders: [
{
test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", sassLoaders.join("!")),
},
]
},
plugins: [
new BowerWebpackPlugin(),
new ExtractTextPlugin("[name].css"),
],
externals: {
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx', '.scss'],
modulesDirectories: ["src", "node_modules", "bower_components"],
}
};
module.exports = config;
package.json
{
"scripts": {
"start": "npm run serve | npm run dev",
"serve": "./node_modules/.bin/http-server -p 8080",
"dev": "webpack-dev-server --progress --colors --port 8090"
},
"name": "name",
"version": "1.0.0",
"description": "internal evidence application",
"main": "index.js",
"author": "author",
"license": "ISC",
"dependencies": {
"babel-core": "^5.8.22",
"babel-loader": "^5.3.2",
"extract-text-webpack-plugin": "^0.8.2",
"react": "^0.13.3"
},
"devDependencies": {
"babel-loader": "^5.3.2",
"bower-webpack-plugin": "^0.1.8",
"css-loader": "^0.16.0",
"http-server": "^0.8.0",
"jsx-loader": "^0.13.2",
"node-sass": "^3.2.0",
"path": "^0.11.14",
"sass-loader": "^2.0.1",
"style-loader": "^0.12.3",
"webpack": "^1.11.0",
"webpack-dev-server": "^1.10.1"
}
}
项目结构
网页包开发服务器的输出
...
Hash: d8029817acd9fe21718c
Version: webpack 1.11.0
Time: 3884ms
Asset Size Chunks Chunk Names
bundle.js 871 kB 0 [emitted] main
chunk {0} bundle.js (main) 211 kB [rendered]
[0] ./src/script/index.jsx 274 bytes {0} [built]
[2] ./src/script/hello.jsx 456 bytes {0} [built]
[3] jquery (bower component) 45 bytes {0} [built]
[4] ./bower_components/jquery/dist/jquery.js 210 kB {0} [built]
+ 1 hidden modules
webpack: bundle is now VALID.
很抱歉,我没有意识到我必须将SCS包含到JavaScript文件中。您到底是如何将SCS包含到JS文件中的?我面临着类似的问题。@cs1193与javascript文件相同谢谢我得到了它,但不幸的是我无法让css在我的上工作,它给了我一个404。你是否在.css fles的网页包配置中使用css加载器?是的。您必须同时使用css加载器和样式加载器,并且需要javascript中的css。