reactjs – 如何获取为React Css模块工作的源代码?
发布时间:2020-12-15 20:51:27 所属栏目:百科 来源:网络整理
导读:我正在尝试使用 react-css-modules ,webpack和 Hot Module Replacement设置一个React项目.一切都像一个魅力,但是我无法使CSS源代码工作. 我跟着this guide做HMR工作.它涉及到一个BrowserSync设置,以便在Webpack将其写入磁盘后更新css文件. 我使用(由react-cs
我正在尝试使用
react-css-modules ,webpack和
Hot Module Replacement设置一个React项目.一切都像一个魅力,但是我无法使CSS源代码工作.
我跟着this guide做HMR工作.它涉及到一个BrowserSync设置,以便在Webpack将其写入磁盘后更新css文件. 我使用(由react-css-modules建议)ExtractTextPlugin提取所有的CSS: { test: /.scss$/,loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass') } 但是如果我将这个更改为sourcemaps,如here所示 loader: ExtractTextPlugin.extract('style','css?sourceMap!sass-loader outputStyle=expanded&sourceMap=true&sourceMapContents=true') 我得到错误:“根”CSS模块未定义.在我的浏览器控制台. 您可以找到我的示例repo here,但这是我用于开发的完整webpack配置. var webpack = require('webpack'); var path = require('path'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var WriteFilePlugin = require('write-file-webpack-plugin').default; module.exports = { entry: { bundle: [ 'webpack/hot/dev-server','webpack-hot-middleware/client','./index.js' ] },devtool: 'cheap-module-source-map',debug: true,devServer: devServer,context: path.resolve(__dirname,'./src'),output: { path: path.resolve(__dirname,'./builds'),filename: '[name].js',publicPath: '/builds/' },plugins: [ new webpack.HotModuleReplacementPlugin(),new webpack.OldWatchingPlugin(),new WriteFilePlugin(),new ExtractTextPlugin('[name].css',{ allChunks: true }) ],module: { loaders: [ { test: /.js$/,loaders: ['react-hot','babel-loader'],exclude: /node_modules/ },{ test: /.scss$/,'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass') } ] },resolve: { extensions: ['','.js','.json'] } }; 如何使sourcemap工作?
用这个:
ExtractTextPlugin.extract('style','css?sourceMap&modules&importLoaders=1&localI??dentName=[name]__[local]___[hash:base64:5]!sass?sourceMap') 即将sourceMap参数添加到css& sass装载机.它在sass-loader docs年这样说. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |